Che cosa è AngularJS?
AngularJS è un potente e strutturale Framework JavaScript che è più facile da implementare in applicazioni web singole e permette di organizzare grandi, client di applicazioni pesanti in qualcosa di gestibile. Si tratta di una web application framework open source, gratuito e utilizzato da migliaia di sviluppatori in tutto il mondo.
AngularJS si basa sulla MVC (Vista del modello di controllo) modello che ha lo scopo di creare applicazioni web ricche di internet e di semplificare sia lo sviluppo e la sperimentazione di applicazioni utilizzando l'architettura MVC e separa le applicazioni rich internet in modelli, viste e controller. AngularJS crea applicazioni singola pagina, il che significa che il browser sta per caricare una singola pagina, indipendentemente dalle dimensioni della vostra applicazione.
AngularJS è stato sviluppato da Miskohevery e Adam Abron,mantenuto da Google; utilizzato internamente da loro e MIT. Esso è rilasciato sotto la licenza Apache versione 2.0. E 'stato inizialmente rilasciato in 2009 e la versione stabile attuale è 1.3.5 (Decemeber 1, 2014).
AngularJS: In questa sezione, cerchiamo di riassumere le basi di AngularJS.
- È una libreria scritta in JavaScript
- Non è una piattaforma o lingua
- Non è un plug-in o estensione
- Si estende HTML, CSS e JavaScript
- Non è una libreria manipolazione del DOM come jQuery
- Non richiede jQuery o eredità
- Non richiede unidirezionale associazione dati e il codice boilerplate
Perché AngularJS?
- E 'basato su MVC design pattern che fornisce numerosi modi per costruire applicazioni web lato client.
- Aiuta a costruire applicazioni lato client con meno codice e una maggiore flessibilità.
- Si estende HTML utilizzando la funzionalità di direttive, attributi, espressioni e modelli in formato HTML.
- AngularJS è un'architettura MVC, che semplifica lo sviluppo e la sperimentazione di applicazioni facilmente per lato client.
- E 'un bene per lo sviluppo di applicazioni a pagina singola e front-end per le applicazioni basate sul web.
- Ha quadro flessibile e caratteristiche versatili. Così è utilizzato sia per i grandi progetti di app e piccole piccole applicazioni.
Features:
AngularJS (Quadro basato Javascript) crea applicazioni in un modo più veloce, utilizzando diverse funzionalità come ad esempio:
- Si tratta di una tecnologia lato client che fornisce le cose potenti per creare applicazioni web dinamiche.
- Si tratta di un framework basato MVC, consente agli utenti di costruire una corretta architettura e applicazioni web mantenibili.
- Si tratta di una web application framework open source utilizzato da migliaia di sviluppatori in tutto il mondo.
- Esso consente l'utilizzo di componenti riutilizzabili e il riutilizzo del codice.
- Esso rende la creazione dell'interfaccia utente (UI) facile attraverso processo di associazione dei dati.
- Approccio HTML dichiarativa.
- Aiuta a suddividere l'applicazione in parti più piccole.
Diagramma di architettura e componenti: Diamo uno sguardo al diagramma dell'architettura del quadro AngularJS e dei suoi componenti.
Figure: AngularJS Architettura
AngularJS contiene Moduli che fungono da contenitore per diversi tipi di applicazioni come controllori, vista, direttive, fabbrica, ecc. Modulo specifica come una applicazione dovrebbe essere bootstrap. Utilizzando i moduli, I processi saranno più facili da capire; è possibile riutilizzare il codice, fine a prove finire utilizza moduli per sovrascrivere la configurazione, ecc. E 'il luogo ideale per la creazione di, la registrazione e il recupero dei moduli angolari.
Config componente accetta solo i fornitori di moduli, significa ogni servizio, fabbrica ecc sono esempi di provider. Esso fornisce tutti questi casi alle rotte.
The Percorsi sono utilizzati per il collegamento URL ai controllori e punti di vista.
The Visualizzazioni sono utilizzati per aggiungere sofisticata gestione degli eventi utente. It uses ng-viewdirettiva che completa il servizio rotta dal modello del percorso corrente al layout principale (index.html) file.
The controllore controlla i dati delle applicazioni AngularJS che sono oggetti JavaScript regolari. AngularJS definisce un controlloredirettiva che crea nuovi oggetti controller utilizzando la funzione di controllo. E il nuovo bambino è disponibile per la funzione di controllo come $portatacome mostrato nel diagramma.
The vista invia elemento o attributo alla direttive che racconta compilatore HTML delle AngularJS allegare comportamento specifico all'elemento DOM e dei suoi figli.
The fabbrica viene utilizzato per definire il servizio AngularJS e si chiama quando un servizio deve essere istanziati.
Introduzione a AngularJS:
AngularJS è facile iniziare con. Fornisce funzioni come due dati modo vincolante che rende tag personalizzati, attributi che incapsulare direttive integrati che fanno estendere le funzionalità di HTML più facile.
- È distribuito file JavaScript e può essere utilizzato in una pagina web includendo biblioteca AngularJS come mostrato sotto:
[codice]
<script src =”http:// angularjs ajax.googleapis.com/ajax/libs/~~number=plural /1.2.26/ angular.min.js”>
</copione>
[/codice]
È anche possibile controllare la versione più recente di AngularJS sul loro sito ufficiale.
- È possibile creare applicazioni AngularJS come illustrato di seguito:
[codice]
<htmlng-app></html>
O
<html ng-app = "MyApp"></html>
O
<divng-app></div>
O
<div ng-app = "MyApp"></div>
[/codice]
The l'app attributo è l'elemento principale del AngularJS app.
- Controller può essere definita come mostrato sotto:
[codice]
<Div-app = "" del regolatore = "myController">
<input type = "text" ng modello = "messaggio">
</div>
[/codice]
The un controlloredirettiva definisce il controller dell'applicazione. The un modellodirettiva associa il valore di controlli HTML, come campi di input, Selezionare ecc per l'applicazione dei dati.
- Attuare il controller utilizzando $portata oggetto come scritto qui sotto:
[codice]
functionMyController($portata){
$scope.message = "Inserisci il tuo nome";
}
[/codice]
The $portata Oggetto è il modello di applicazione che richiama il controllore che crea messaggio proprietà nel campo di applicazione.
Concetti fondamentali:In questa sezione avremo una discussione dettagliata sui componenti di base ei concetti dietro di loro.
- Moduli
- Direttive
- Portata
- Controller
- Espressioni
- Modelli
- Routing
- Filtri
Moduli:
I moduli forniscono un eccellente meccanismo per dividere l'applicazione in piccole componenti riutilizzabili e specificano come una applicazione dovrebbe essere bootstrap. Moduli specificare come si definiscono i componenti dell'applicazione e rende l'applicazione più leggibile. Ogni modulo è identificato da un nome univoco.
Direttive:
Le direttive sono elementi costitutivi fondamentali della AngularJS che vengono utilizzati per creare tag HTML personalizzati e possono essere messi in nomi degli elementi, attributi e commenti. Direttive possono essere utilizzati come direttive HTML che costruiscono widget complesse con funzionalità a strati.
Portata:
Scope è un oggetto che si lega in vista controllore. Nella struttura MVC, si riferisce al modello di applicazione. Gli ambiti possono guardare le espressioni e diffondere eventi che si sono organizzate in struttura gerarchica.
Controller:
Controller sono oggetti JavaScript che definisce il comportamento effettivo della vostra applicazione. E 'responsabile della definizione proprietà modello e le funzioni utilizzando $portata oggetto. Il controller non memorizza lo stato e non interagisce con servizi remoti.
Espressioni:
Le espressioni sono scritti all'interno di parentesi graffe "{{ }}"Denotano le associazioni che referrers che il nostro modello di applicazione. Espressioni non supportano il rendiconto di controllo. AngularJS uscita volontà dei dati in cui vengono utilizzati.
Modelli:
Modello è solo vecchio-plain-HTML che non include alcun modello di file specifici angolari. Viene fornito con una serie di modelli dal vivo per creare i controller ecc utilizzando template engine. I modelli sono utilizzati per mostrare le informazioni dal modello e il controller.
Routing:
E 'utilizzato per il collegamento URL al controllore e la vista. Routing è curata da fornitori di servizi denominati $fornitore di percorso per gestire l'instradamento, che è il fornitore del $percorso servizio. In altre parole, è carico di sotto modelli a seconda l'URL della pagina.
Filtri:
I filtri sono usati con espressioni per trasformare o modificare i dati dai modelli. Possiamo aggiungere espressioni o direttive con carattere pipe. AngularJS ha alcuni dei filtri comunemente usati come:
- valuta: converte il numero in formato di valuta.
- lettere maiuscole: converte le stringhe in maiuscolo.
- minuscolo: converte le stringhe in minuscolo.
- filtro: seleziona sottoinsieme di elementi da matrice.
- orderby: ordini di matrice con l'espressione, come elencate in ordine alfabetico per archi e numericamente per i numeri.
Esempio:
Creiamo un esempio semplice utilizzando la libreria AngularJS e creare un file HTML come FirstExample.html come mostrato sotto:
Listing1: Semplice applicazione AngularJS
[codice]
<!DOCTYPE html>
<html>
<capo>
<script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></copione>
</capo>
<corpo>
<div ng-app =”” il controller =”MyController”>
Inserire il nome: <input type =”testo” il modello =”nome utente”><br>
<br>
Nome completo: {{nome utente}}
</div>
<copione>
functionMyController($portata) {
$scope.userName = “David”;
}
</copione>
</corpo>
</html>
[/codice]
Come discusso, abbiamo incluso AngularJS file JavaScript nella pagina HTML che è definita all'interno del <capo> tag. La parte successiva contiene app AngularJS che viene definito con il l'app attributo viene eseguito all'interno del <div> tag.
The un controllore direttiva definisce il controller dell'applicazione. I AngularJS invocheranno il "MyController" con $portata oggetto che crea proprietà chiamata "nome utente" nell'ambito.
Definire il nome del modello utilizzando un modelloDirettiva definito nel <ingresso> tag. Si lega il campo di input per la proprietà di controllo "nome utente".
Apri il FirstExample.html nel browser e vedere il risultato, come mostrato nella schermata qui sotto:
Figure: AngularJS Esempio
Conclusione: Abbiamo già discusso tutti gli aspetti della AnguarJS. Prima di concludere, cerchiamo di riassumere i punti. AngularJS (noto anche come angolare)è una web application framework open source. Fornisce lato client MVC architettura insieme ai componenti comunemente utilizzati richieste per applicazioni rich internet. AngularJS segue modello di programmazione dichiarativa per la creazione di interfacce utente. L'obiettivo principale di questo quadro è quello di rendere più facile sviluppo e testing.
Spero che tu hai una chiara comprensione del quadro AngularJS. Buona lettura a www.techalpine.com
