Panoramica di AngularJS
Alla Brat Tech LLC nel 2009, gli sviluppatori Misko Hevery e Adam Abrons hanno sviluppato un framework AngularJS dopo il quale si è verificata una rivoluzione nello sviluppo del front-end e nella costruzione di applicazioni a pagina singola. AngularJS è un framework javascript, che lega elementi HTML con oggetti javascript. L'associazione dei dati e l'iniezione delle dipendenze sono alcune delle caratteristiche principali di AngularJs che consentono di risparmiare tempo nella scrittura di lunghi codici che semplificano il lavoro di sviluppatori e browser. Come sarà raggiunto questo obiettivo sarà ulteriormente spiegato, ma per ora ti ricordi solo queste terminologie. In questo argomento, impareremo la versione di AngularJS.
Versioni di AngularJS
AngularJS è la versione Angular 1.x e successivamente viene sviluppato Angular 2 che è diverso da Angular 1.x. lavori.
Perché la versione di AngularJS e come funziona?
AngularJS ci aiuta a sviluppare applicazioni interattive a pagina singola. Per applicazioni a pagina singola, intendo che la singola pagina visitata caricherà tutti gli altri contenuti utilizzando JavaScript. Questa funzione consente all'applicazione di essere veloce ed efficace.
Quando utilizziamo JavaScript e HTML per creare applicazioni, dovrai associare la vista al modello utilizzando le funzioni e gli oggetti JS. Ma se pensi che questi dati a due vie siano associati in una pratica applicazione industriale, lo stesso approccio diventa noioso con codici lunghi. Questo è uno dei motivi principali per cui era necessario imparare e sviluppare AngularJS.
È tempo di apprendere alcuni concetti di base prima di iniziare a sviluppare applicazioni su cui si basa AngularJS:
- Modello: il modello contiene dati, oggetti e logica.
- Visualizza: è la presentazione visiva dell'applicazione che è anche chiamata interfaccia utente.
- Visualizza il modello a due vie Binding: l'oggetto javascript, ovvero l'oggetto che si desidera associare a un DOM HTML, ad esempio una casella di testo, un input o qualsiasi tag HTML e viceversa, può essere fatto facilmente utilizzando alcune librerie AngularJS predefinite.
- Controller: i controller sono funzioni javascript che collegano il modello e la vista.
- Servizi: i servizi di AngularJS sono funzioni javascript che eseguono attività o funzionalità specifiche che vengono mantenute e testate da javascript. Alcuni esempi di servizi sono $ scope, $ http, $ rootScope.
- Espressioni: le espressioni vengono utilizzate per associare i dati con HTML. Questa funzione è anche nota come interpolazione. Le espressioni sono scritte con parentesi graffe ((expression)). Le espressioni vengono valutate e possono essere scritte senza tag html.
- Moduli: i moduli funzionano come un contenitore contenente diverse parti dell'applicazione angolare come controller, servizi, direttive, ecc.
Direttive e ambito di applicazione
Concentriamoci su alcune delle direttive predefinite e su come funzionano effettivamente. Gran parte di questa direttiva inizia con "ng" tratto da Angular
1. Ambito di applicazione
- L'ambito definisce l'oggetto javascript con cui è possibile accedere ai dati dal Modello all'HTML. Scope funziona come un connettore tra i due.
- Alcuni servizi di ambito sono $ scope, $ rootScope. '$' definisce che questi servizi sono predefiniti e non possono essere modificati. Ricorda, l'HTML non distingue tra maiuscole e minuscole, ma AngularJS distingue tra maiuscole e minuscole, quindi $ Scope genererà un errore come non definito.
- È necessario dichiararli nella nostra funzione di controller e angolare lo inietterà automaticamente.
2. ng-controller
- Questa direttiva viene utilizzata per creare un'istanza / oggetto del controller attraverso il quale il DOM HTML comunicherà con la logica effettiva.
- HTML dice che qualsiasi tag con un '-' verrà ignorato durante la creazione di DOM HTML.
- Una volta creato il DOM, l'interprete angolare trova una direttiva ng-controller e crea un'istanza del controller particolare fornendo anche un servizio $ scope.
- Ci possono essere molti ng-controller in una singola pagina HTML.
3. ng-app
- Questa direttiva funge da contenitore contenente controller, direttive, filtri, espressioni, ecc. Registra o avvia l'applicazione o il modulo.
- Esiste solo un'app ng nel tuo HTML. Sotto una ng-app ci possono essere molti ng-controller.
Ciò crea un'istanza di un oggetto applicazione con il servizio $ rootScope.
- Pertanto, le variabili / funzioni $ rootScope sono accessibili in un'applicazione completa.
4. modello ng
- ng-model viene utilizzato per associare i dati da html all'oggetto modello. Fornisce un'associazione a due vie.
5. ng-if
- Per eseguire istruzioni condizionali sui tag Html ng-if viene utilizzato. Se la condizione diventa falsa, il DOM non include tale div su DOM.
6. ng-bind
- Invece di usare (()) per l'interpolazione, è possibile utilizzare anche ng-bind.
7. ng-disabilitato
- In base a una condizione, un elemento nella vista può essere disabilitato.
8. ng-show
- Se la condizione data per ng-show è vera, l'elemento particolare viene mostrato sul DOM.
9. ng-hide
- Se la condizione data per ng-hide è vera, l'elemento particolare rimarrà nascosto nel DOM.
10. ng-repeat
- Ripeterà il div o lo span particolare su HTML con la lunghezza dell'array o dell'elenco fornito.
11. ng-clic
- All'evento click sull'elemento html, eseguirà la funzionalità o l'attività fornite.
Suggerimento: il modo migliore per imparare qualsiasi lingua è codificarlo. Quindi vediamo il nostro primo codice.
Esempi di versione di AngularJS
Ecco alcuni degli esempi riportati di seguito
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Produzione:
Nome: Joseph
Cognome: Alex
Il tuo nome è: Joseph Alex
Ci sono alcuni punti su cui concentrarsi dallo snippet di codifica sopra:
- Alla riga 3 viene aggiunto un file angular.min.js nella pagina che caricherà tutte le librerie necessarie per l'esecuzione dell'applicazione AngularJS.
- AngularJS ha principalmente 2 librerie angular.js e una versione compressa di questo file come angular.min.js.
- Alla riga 5 puoi vedere la direttiva come ng-app che viene ignorata da HTML durante la creazione di DOM HTML e adottata da AngularJS come una delle sue direttive per avviare l'applicazione.
- Alla riga 6, 7 viene utilizzato il modello ng che legherà il testo che inserirai nella casella di testo alle variabili fname e lname. Ricorda che queste variabili fanno distinzione tra maiuscole e minuscole.
- Alla riga 8 viene visualizzata l'espressione ((fname + ”“ + lname)) che angolare valuterà e visualizzerà i dati immessi nelle caselle di testo. Questo è noto come interpolazione.
Esploriamo con un altro esempio:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Nome di battesimo:
Cognome:
Il nome del cliente è ((customerName)) e l'età è ((customerAge))
In questo esempio, alla riga 5 viene creata un'app con il nome CustomerApp che includerà tutte le parti dell'applicazione. Nella riga successiva, viene creato un controller e viene assegnato il nome come firstController. $ scope è dichiarato come parametro di funzione. AngularJS lo inietterà automaticamente nell'applicazione per l'uso diretto, lo sviluppatore non deve crearlo esplicitamente.
Questa funzione è nota come iniezione di dipendenza. In modo simile, ng-controller viene utilizzato per lo stesso controller sotto il tag ng-app. Ricorda che l'ambito dell'app o del controller sarà dove finisce il div o qualsiasi cosa tu definisca un'app o un controller. In questo caso, non è possibile accedere al controller o all'applicazione dopo la riga 16.
Articoli consigliati
Questa è una guida a What is AngularJS Version. Qui discutiamo le versioni di AngularJS con direttive, ambito e come funziona AngularJS. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -
- Architettura di AngularJS
- Applicazione angolare JS
- AngularJS Unit Testing
- Carriera in AngularJS
- Che cos'è Angular 2?