AngularJS è un framework per creare applicazioni web su larga scala e ad alte prestazioni, mantenendole facili da mantenere. Di seguito sono riportate le caratteristiche del framework AngularJS.

• AngularJS è un potente framework di sviluppo basato su JavaScript per creare RICH Internet Application (RIA).

• AngularJS fornisce agli sviluppatori opzioni per scrivere applicazioni lato client (utilizzando JavaScript) in un modo pulito MVC (Model View Controller).

• L'applicazione scritta in AngularJS è compatibile con tutti i browser. AngularJS gestisce automaticamente il codice JavaScript adatto a ciascun browser.

• AngularJS è open source, completamente gratuito e utilizzato da migliaia di sviluppatori in tutto il mondo. È concesso in licenza con la licenza Apache versione 2.0.

Il data binding è la sincronizzazione automatica dei dati tra i componenti del modello e della vista. La direttiva ng-model viene utilizzata nel data binding.

Gli ambiti sono oggetti che fanno riferimento al modello. Fungono da collante tra il controller e la vista.

I controller sono funzioni JavaScript associate a un determinato ambito. Sono gli attori principali nel framework AngularJS e svolgono funzioni per operare sui dati e decidere quale vista deve essere aggiornata per mostrare i dati aggiornati basati sul modello.

AngularJS viene fornito con diversi servizi integrati. Ad esempio $ https: service viene utilizzato per effettuare XMLHttpRequests (chiamate Ajax). I servizi sono oggetti singleton di cui viene creata un'istanza solo una volta nell'app.

I filtri selezionano un sottoinsieme di elementi da un array e restituiscono un nuovo array. I filtri vengono utilizzati per mostrare gli elementi filtrati da un elenco di elementi in base a criteri definiti.

Le direttive sono marcatori su elementi DOM (come elementi, attributi, CSS e altro). Questi possono essere utilizzati per creare tag HTML personalizzati che fungono da nuovi widget personalizzati. AngularJS ha direttive incorporate (ng-bind, ng-model, ecc.) Per eseguire la maggior parte delle attività che gli sviluppatori devono svolgere.

I modelli sono la vista renderizzata con le informazioni dal controller e dal modello. Questi possono essere un singolo file (come index.html) o più visualizzazioni in una pagina utilizzando "parziali".

È il concetto di cambiare visuale. Il controller basato su AngularJS decide quale vista rendere in base alla logica di business.

Il deep linking consente di codificare lo stato dell'applicazione nell'URL in modo che possa essere aggiunto ai segnalibri. L'applicazione può quindi essere ripristinata dall'URL nello stesso stato.

Di seguito sono riportati i vantaggi di AngularJS.

• AngularJS fornisce la capacità di creare un'applicazione a pagina singola in modo molto pulito e gestibile.

• AngularJS fornisce capacità di associazione dati all'HTML, offrendo così all'utente un'esperienza ricca e reattiva.

• Il codice AngularJS è testabile dall'unità.

• AngularJS utilizza l'iniezione di dipendenza e utilizza la separazione delle preoccupazioni.

• AngularJS fornisce componenti riutilizzabili.

• Con AngularJS, lo sviluppatore scrive meno codice e ottiene più funzionalità.

• In AngularJS, le viste sono pagine html pure e i controller scritti in JavaScript eseguono l'elaborazione aziendale.

• Le applicazioni AngularJS possono essere eseguite su tutti i principali browser e smartphone, inclusi telefoni / tablet basati su Android e iOS.

Di seguito sono riportati gli svantaggi di AngularJS.

• Not Secure- Essendo solo framework JavaScript, le applicazioni scritte in AngularJS non sono sicure. L'autenticazione e l'autorizzazione lato server sono necessarie per mantenere sicura un'applicazione.

• Not degradable - Se l'utente dell'applicazione disabilita JavaScript, l'utente vedrà solo la pagina di base e nient'altro.

Di seguito sono riportate le tre direttive principali di AngularJS.

• ng-app - Questa direttiva definisce e collega un'applicazione AngularJS a HTML.

• ng-model - Questa direttiva lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML.

• ng-bind - Questa direttiva lega i dati dell'applicazione AngularJS ai tag HTML.

Quando la pagina viene caricata nel browser, accadono le seguenti cose:

• Il documento HTML viene caricato nel browser e valutato dal browser. Il file JavaScript AngularJS viene caricato; viene creato l' oggetto globale angolare . Successivamente, viene eseguito JavaScript che registra le funzioni del controller.

• Successivamente AngularJS esegue la scansione dell'HTML per cercare app e visualizzazioni AngularJS. Una volta individuata la vista, collega quella vista alla funzione del controller corrispondente.

• Successivamente, AngularJS esegue le funzioni del controller. Quindi esegue il rendering delle viste con i dati del modello popolato dal controller. La pagina è pronta.

Model Visualizzare Controller o MVC, come viene comunemente chiamato, è un modello di progettazione software per lo sviluppo di applicazioni web. Un pattern Model View Controller è costituito dalle seguenti tre parti:

• Model - È il livello più basso del pattern responsabile della conservazione dei dati.

• View - È responsabile della visualizzazione totale o parziale dei dati all'utente.

• Controller - È un codice software che controlla le interazioni tra il modello e la vista.

La direttiva ng-app definisce e collega un'applicazione AngularJS a HTML. Indica anche l'inizio dell'applicazione.

La direttiva ng-model lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML. Crea una variabile di modello che può essere utilizzata con la pagina html e all'interno del controllo contenitore (ad esempio, div) con direttiva ng-app.

La direttiva ng-bind lega i dati dell'applicazione AngularJS ai tag HTML. ng-bind aggiorna il modello creato dalla direttiva ng-model da visualizzare nel tag html ogni volta che l'utente immette qualcosa nel controllo o aggiorna i dati del controllo html quando i dati del modello vengono aggiornati dal controller.

La direttiva ng-controller dice ad AngularJS quale controller usare con questa vista. L'applicazione AngularJS si basa principalmente sui controller per controllare il flusso di dati nell'applicazione. Un controller è un oggetto JavaScript contenente attributi / proprietà e funzioni. Ogni controller accetta $ scope come parametro che fa riferimento all'applicazione / modulo che il controller deve controllare.

Essendo AngularJS una libreria basata su javaScript puro, si integra facilmente con l'HTML.

Step 1 - Includere angularjs javascript libray nella pagina html

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

Step 2 - Seleziona l'app AngularJS

Successivamente diciamo quale parte dell'HTML contiene l'app AngularJS. Ciò viene fatto aggiungendo l' attributo ng-app all'elemento HTML radice dell'app AngularJS. Puoi aggiungerlo all'elemento html o all'elemento body come mostrato di seguito:

<body ng-app = "myapp">
</body>

La direttiva ng-init inizializza i dati di un'applicazione AngularJS. Viene utilizzato per inserire valori nelle variabili da utilizzare nell'applicazione.

La direttiva ng-repeat ripete gli elementi html per ogni elemento in una raccolta.

Le espressioni vengono utilizzate per associare i dati dell'applicazione a html. Le espressioni sono scritte tra doppie parentesi graffe come {{espressione}}. Le espressioni si comportano allo stesso modo delle direttive ng-bind. Le espressioni dell'applicazione AngularJS sono espressioni JavaScript pure e restituiscono i dati dove vengono utilizzati.

Il filtro maiuscolo converte un testo in testo maiuscolo.

Nell'esempio seguente, abbiamo aggiunto il filtro in maiuscolo a un'espressione utilizzando il carattere pipe. Qui abbiamo aggiunto il filtro in maiuscolo per stampare il nome dello studente in tutte le lettere maiuscole.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

Il filtro minuscolo converte un testo in testo minuscolo.

Nell'esempio seguente, abbiamo aggiunto un filtro in minuscolo a un'espressione utilizzando il carattere pipe. Qui abbiamo aggiunto il filtro in minuscolo per stampare il nome dello studente in tutte le lettere minuscole.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

Il filtro valuta formatta il testo in un formato valuta.

Nell'esempio seguente, abbiamo aggiunto il filtro di valuta a un'espressione che restituisce un numero utilizzando il carattere pipe. Qui abbiamo aggiunto il filtro valuta per stampare le commissioni utilizzando il formato valuta.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

filtro filtro viene utilizzato per filtrare l'array in un sottoinsieme in base ai criteri forniti.

Nell'esempio seguente, per visualizzare solo i soggetti obbligatori, abbiamo utilizzato subjectName come filtro.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

orderby filter ordina l'array in base ai criteri forniti.

Nell'esempio seguente, per ordinare i soggetti in base ai segni, abbiamo utilizzato i segni orderBy.

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

La direttiva ng-disabled disabilita un determinato controllo.

Nell'esempio seguente, abbiamo aggiunto l'attributo ng-disabled a un pulsante HTML e gli abbiamo passato un modello. Quindi abbiamo collegato il modello a una casella di controllo e possiamo vedere la variazione.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

La direttiva ng-show mostra un dato controllo.

Nell'esempio seguente, abbiamo aggiunto l'attributo ng-show a un pulsante HTML e gli abbiamo passato un modello. Quindi abbiamo collegato il modello a una casella di controllo e possiamo vedere la variazione.

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

La direttiva ng-hide nasconde un dato controllo.

Nell'esempio seguente, abbiamo aggiunto l'attributo ng-hide a un pulsante HTML e gli abbiamo passato un modello. Quindi abbiamo collegato il modello a una casella di controllo e possiamo vedere la variazione.

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

La direttiva ng-click rappresenta un evento di clic AngularJS.

Nell'esempio seguente, abbiamo aggiunto l'attributo ng-click a un pulsante HTML e abbiamo aggiunto un'espressione per aggiornare un modello. Quindi possiamo vedere la variazione.

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

l

angular.module viene utilizzato per creare moduli AngularJS insieme ai suoi moduli dipendenti. Considera il seguente esempio:

var mainApp = angular.module("mainApp", []);

Qui abbiamo dichiarato un'applicazione mainAppmodulo utilizzando la funzione angular.module. Gli abbiamo passato un array vuoto. Questo array contiene generalmente moduli dipendenti dichiarati in precedenza.

AngularJS arricchisce la compilazione e la convalida dei moduli. Possiamo usare i flag $ dirty e $ invalid per eseguire le convalide in modo trasparente. Utilizzare novalidate con una dichiarazione del modulo per disabilitare qualsiasi convalida specifica del browser.

Di seguito può essere utilizzato per tenere traccia degli errori.

• $dirty - afferma che il valore è stato modificato.

• $invalid - afferma che il valore inserito non è valido.

• $error - indica l'errore esatto.

Usando AngularJS, possiamo incorporare pagine HTML all'interno di una pagina HTML usando la direttiva ng-include.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

AngularJS fornisce $ https: controllo che funziona come un servizio per effettuare una chiamata ajax per leggere i dati dal server. Il server effettua una chiamata al database per ottenere i record desiderati. AngularJS necessita di dati in formato JSON. Una volta che i dati sono pronti, $ https: può essere utilizzato per ottenere i dati dal server nel modo seguente:

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

$ routeProvider è il servizio chiave che imposta la configurazione degli URL, li mappa con la pagina html o ng-template corrispondente e collega un controller con lo stesso.

Scope è uno speciale oggetto JavaScript che svolge il ruolo di unire il controller alle viste. L'ambito contiene i dati del modello. Nei controller, si accede ai dati del modello tramite l'oggetto $ scope. $ rootScope è il genitore di tutte le variabili di ambito.

Gli ambiti sono specifici dei controller. Se definiamo controller nidificati, il controller figlio erediterà l'ambito del controller padre.

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
	  
      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

Di seguito sono riportati i punti importanti da considerare nell'esempio precedente.

• Abbiamo impostato i valori sui modelli in shapeController.

• Abbiamo sovrascritto il messaggio nel controller figlio circleController. Quando "messaggio" viene utilizzato all'interno del modulo del controller circleController, verrà utilizzato il messaggio sovrascritto.

I servizi sono funzioni JavaScript e sono responsabili di eseguire solo attività specifiche. Ogni servizio è responsabile di un'attività specifica, ad esempio $ https: viene utilizzato per effettuare una chiamata ajax per ottenere i dati del server. $ route viene utilizzato per definire le informazioni di instradamento e così via. I servizi incorporati sono sempre preceduti dal simbolo $.

Utilizzando il metodo di servizio, definiamo un servizio e quindi gli assegniamo il metodo. Gli abbiamo anche inserito un servizio già disponibile.

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) { 
      return MathService.multiply(a,a); 
	}
});

Usando il metodo factory, definiamo prima una factory e poi le assegniamo il metodo.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {     
   var factory = {};  
		
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
});

Il metodo factory viene utilizzato per definire una factory che può essere successivamente utilizzata per creare servizi come e quando richiesto, mentre il metodo service viene utilizzato per creare un servizio il cui scopo è svolgere un'attività definita.

AngularJS fornisce un meccanismo di iniezione delle dipendenze supremo. Fornisce i seguenti componenti principali che possono essere iniettati l'uno nell'altro come dipendenze.

• value
• factory
• service
• provider
• constant

provider viene utilizzato da AngularJS internamente per creare servizi, factory ecc. durante la fase di configurazione (fase durante la quale AngularJS si avvia da solo). Lo script menzionato di seguito può essere utilizzato per creare MathService che abbiamo creato in precedenza. Provider è un metodo factory speciale con un metodo get () che viene utilizzato per restituire il valore / service / factory.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
	
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
		
   });
});

le costanti vengono utilizzate per passare i valori in fase di configurazione considerando il fatto che il valore non può essere utilizzato per essere passato durante la fase di configurazione.

mainApp.constant("configParam", "constant value");

Sì! In AngularJS possiamo creare direttive personalizzate per estendere le funzionalità esistenti di AngularJS.

Le direttive personalizzate vengono utilizzate in AngularJS per estendere la funzionalità dell'HTML. Le direttive personalizzate vengono definite utilizzando la funzione "direttiva". Una direttiva personalizzata sostituisce semplicemente l'elemento per cui è attivata. L'applicazione AngularJS durante il bootstrap trova gli elementi corrispondenti ed esegue un'attività una tantum utilizzando il suo metodo compile () della direttiva personalizzata, quindi elabora l'elemento utilizzando il metodo link () della direttiva personalizzata in base all'ambito della direttiva.

AngularJS fornisce supporto per creare direttive personalizzate per i seguenti tipi di elementi.

• Element directives - La direttiva si attiva quando viene rilevato un elemento corrispondente.

• Attribute - La direttiva si attiva quando viene rilevato un attributo corrispondente.

• CSS - La direttiva si attiva quando si incontra uno stile CSS corrispondente.

• Comment - La direttiva si attiva quando si incontra un commento corrispondente.

L'internazionalizzazione è un modo per mostrare informazioni specifiche della località su un sito web. Ad esempio, visualizzare il contenuto di un sito Web in lingua inglese negli Stati Uniti e in danese in Francia.

AngularJS supporta l'internazionalizzazione integrata per tre tipi di filtri valuta, data e numeri. Abbiamo solo bisogno di incorporare i js corrispondenti in base alla località del paese. Per impostazione predefinita, gestisce le impostazioni locali del browser. Ad esempio, per utilizzare la lingua danese, utilizzare il seguente script

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>