Share
AngularJS è un ottimo framework JavaScript che ha alcune caratteristiche molto interessanti non solo per gli sviluppatori, ma anche per i designer! In questo tutorial, tratteremo quelle che considero le funzionalità più essenziali e come possono contribuire a rendere la tua prossima applicazione web fantastica.
Per avere un'idea di cosa puoi fare con AngularJS, consulta la gamma di articoli AngularJS su Envato Market. È possibile trovare un ritaglio di immagine, un'applicazione web di eCommerce, un editor JSON e molto altro.
Articoli AngularJS sul mercato Envato AngularJS è una nuova, potente tecnologia client-side che fornisce un modo per realizzare cose davvero potenti in un modo che abbraccia ed estende HTML, CSS e JavaScript, mentre sostiene alcune delle sue evidenti carenze. È quello che sarebbe stato l'HTML, se fosse stato creato per contenuti dinamici.
In questo articolo, tratteremo alcuni dei concetti più importanti di AngularJS per ottenere il "quadro generale". Il mio obiettivo è che, dopo aver visto alcune di queste funzionalità, sarai abbastanza entusiasta di andare a costruire qualcosa di divertente con AngularJS.
Pensa al tuo modello come a una singola fonte di verità per la tua applicazione. Il tuo modello è dove vai per leggere o aggiornare qualcosa nella tua applicazione.
L'associazione dei dati è probabilmente la funzione più interessante e più utile in AngularJS. Ti eviterà di scrivere una quantità considerevole di codice boilerplate. Una tipica applicazione web può contenere fino all'80% della sua base di codice, dedicata al movimento, alla manipolazione e all'ascolto del DOM. L'associazione dei dati fa sparire questo codice, così puoi concentrarti sulla tua applicazione.
Pensa al tuo modello come a una singola fonte di verità per la tua applicazione. Il tuo modello è dove vai per leggere o aggiornare qualcosa nella tua applicazione. Le direttive vincolanti i dati forniscono una proiezione del modello alla vista dell'applicazione. Questa proiezione è senza soluzione di continuità e avviene senza alcuno sforzo da parte tua.
Tradizionalmente, quando il modello cambia, lo sviluppatore è responsabile della manipolazione manuale degli elementi DOM e degli attributi per riflettere tali cambiamenti. Questa è una strada a doppio senso. In una direzione, il modello modifica il cambio di unità negli elementi DOM. Nell'altro, le modifiche all'elemento DOM richiedono modifiche nel modello. Ciò è ulteriormente complicato dall'interazione dell'utente, poiché lo sviluppatore è quindi responsabile dell'interpretazione delle interazioni, unendole in un modello e aggiornando la vista. Si tratta di un processo molto manuale e macchinoso, che diventa difficile da controllare, in quanto un'applicazione si sviluppa in dimensioni e complessità.
Ci deve essere un modo migliore! L'associazione dati bidirezionale di AngularJS gestisce la sincronizzazione tra DOM e modello e viceversa.
Ecco un semplice esempio, che dimostra come associare un valore di input a un elemento.
Ciao, yourName!
Questo è estremamente semplice da configurare e quasi magico ...
È importante rendersi conto che in nessun punto AngularJS manipola il modello come stringhe. È tutto il browser DOM.
In AngularJS, un modello è semplicemente semplice HTML. Il vocabolario HTML è esteso, per contenere istruzioni su come il modello dovrebbe essere proiettato nella vista.
I modelli HTML vengono analizzati dal browser nel DOM. Il DOM diventa quindi l'input per il compilatore AngularJS. AngularJS attraversa il modello DOM per le istruzioni di rendering, che sono chiamate direttive. Collettivamente, le direttive sono responsabili della configurazione dell'associazione dati per la vista dell'applicazione.
È importante rendersi conto che in nessun punto AngularJS manipola il modello come stringhe. L'input di AngularJS è il browser DOM e non una stringa HTML. I collegamenti dati sono trasformazioni DOM, non concatenazioni di stringhe o innerHTML i cambiamenti. Usare il DOM come input, piuttosto che stringhe, è la più grande differenziazione che AngularJS ha dai suoi quadri fratelli. L'uso del DOM è ciò che ti permette di estendere il vocabolario della direttiva e di costruire le tue direttive, o persino di astrarle in componenti riutilizzabili!
Uno dei maggiori vantaggi di questo approccio è che crea un flusso di lavoro stretto tra designer e sviluppatori. I progettisti possono contrassegnare il loro codice HTML come normalmente farebbero, e quindi gli sviluppatori prendono il testimone e agganciano le funzionalità, tramite i binding con uno sforzo minimo.
Ecco un esempio in cui sto usando il ng-repeat direttiva per ricalcare il immagini array e popolare ciò che è essenzialmente un img modello.
function AlbumCtrl ($ scope) scope.images = ["thumbnail": "img / image_01.png", "description": "Immagine 01 descrizione", "miniatura": "img / image_02.png", " descrizione ":" Immagine 02 descrizione ", " miniatura ":" img / image_03.png "," descrizione ":" Immagine 03 descrizione ", " miniatura ":" img / image_04.png "," descrizione " : "Immagine 04 descrizione", "miniatura": "img / image_05.png", "descrizione": "Immagine 05 descrizione"];
Vale anche la pena ricordare, come nota a margine, che AngularJS non ti obbliga a imparare una nuova sintassi o ad estrarre i tuoi modelli dalla tua applicazione.
AngularJS incorpora i principi di base del modello di progettazione del software MVC originale nel modo in cui crea applicazioni web lato client.
Lo schema MVC o Model-View-Controller indica molte cose diverse a persone diverse. AngularJS non implementa MVC nel senso tradizionale, ma piuttosto qualcosa più vicino a MVVM (Model-View-ViewModel).
Il modello sono semplicemente i dati nell'applicazione. Il modello è semplicemente vecchi oggetti JavaScript. Non è necessario ereditare dalle classi del framework, racchiuderlo in oggetti proxy o utilizzare metodi getter / setter speciali per accedervi. Il fatto che abbiamo a che fare con il JavaScript di vanilla è una funzionalità davvero piacevole, che riduce il boilerplate dell'applicazione.
UN ViewModel è un oggetto che fornisce dati e metodi specifici per mantenere viste specifiche.
Il ViewModel è il $ portata oggetto che vive all'interno dell'applicazione AngularJS. $ portata è solo un semplice oggetto JavaScript con una piccola API progettata per rilevare e trasmettere le modifiche al suo stato.
Il controllore è responsabile per l'impostazione dello stato iniziale e l'aumento $ portata con metodi per controllare il comportamento. Vale la pena notare che il controllore non memorizza lo stato e non interagisce con i servizi remoti.
Il vista è l'HTML che esiste dopo che AngularJS ha analizzato e compilato l'HTML per includere markup e associazioni renderizzati.
Questa divisione crea una solida base per architettare la tua applicazione. Il $ portata ha un riferimento ai dati, il controllore definisce il comportamento e il vista gestisce il layout e distribuisce l'interazione al controllore rispondere di conseguenza.
AngularJS ha un sottosistema di integrazione delle dipendenze integrato che aiuta lo sviluppatore rendendo l'applicazione più facile da sviluppare, comprendere e testare.
Iniezione delle dipendenze (DI) ti consente di chiedere le tue dipendenze, piuttosto che doverle cercare o creare da te. Pensala come un modo per dire "Ehi ho bisogno di X", e il DI è responsabile della creazione e della fornitura per te.
Per accedere ai servizi centrali di AngularJS, si tratta semplicemente di aggiungere quel servizio come parametro; AngularJS rileverà che hai bisogno di quel servizio e fornisci un'istanza per te.
funzione EditCtrl ($ scope, $ location, $ routeParams) // Qualcosa di intelligente qui ...
Sei anche in grado di definire i tuoi servizi personalizzati e renderli disponibili anche per l'iniezione.
Accentsconagua
angolare. modulo ('MyServiceModule', []). factory ('notify', ['$ window', function (win) return function (msg) win.alert (msg);;]); function myController (scope, notifyService) scope.callNotify = function (msg) notifyService (msg); ; myController. $ inject = ['$ scope', 'notify']; Le direttive sono la mia caratteristica preferita di AngularJS. Hai mai desiderato che il tuo browser facesse nuovi trucchi per te? Bene, ora può! Questa è una delle mie parti preferite di AngularJS. È probabilmente anche l'aspetto più impegnativo di AngularJS.
Le direttive possono essere utilizzate per creare tag HTML personalizzati che fungono da nuovi widget personalizzati. Possono anche essere usati per "decorare" elementi con comportamenti e manipolare gli attributi DOM in modi interessanti.
Ecco un semplice esempio di una direttiva che ascolta un evento e lo aggiorna $ portata, di conseguenza.
myModule.directive ('myComponent', function (mySharedService) return restrict: 'E', controller: function ($ scope, $ attrs, mySharedService) $ scope. $ on ('handleBroadcast', function () $ scope .message = 'Direttiva:' + mySharedService.message;);, sostituisci: true, modello: ''; ); Quindi, puoi usare questa direttiva personalizzata, in questo modo.
La creazione della tua applicazione come una composizione di componenti discreti rende incredibilmente facile aggiungere, aggiornare o eliminare le funzionalità in base alle esigenze.
Il team di AngularJS ritiene fortemente che qualsiasi codice scritto in JavaScript debba avere una serie di test efficaci. Hanno progettato AngularJS tenendo a mente la testabilità, così da rendere il test delle tue applicazioni AngularJS il più semplice possibile. Quindi non ci sono scuse per non farlo.
Dato che JavaScript è dinamico e interpretato, piuttosto che compilato, è estremamente importante per gli sviluppatori adottare una mentalità disciplinata per i test di scrittura.
AngularJS è interamente scritto da zero per essere testabile. Viene fornito anche con una configurazione end-to-end e runner per test di unità. Se vuoi vedere questo in azione, dai un'occhiata al progetto angular-seed su https://github.com/angular/angular-seed.
Una volta che hai il progetto seme, è un gioco da ragazzi eseguire i test contro di esso. Ecco come appare l'output:
La documentazione dell'API è piena di test end-to-end che fanno un incredibile lavoro di illustrazione di come una determinata parte del framework dovrebbe funzionare. Dopo un po ', mi sono ritrovato ad andare direttamente alle prove per vedere come funzionava qualcosa, e poi forse a leggere il resto della documentazione per capire qualcosa.
Abbiamo coperto sei delle molte funzionalità di AngularJS che adoro. Credo che queste sei caratteristiche siano essenziali non solo per essere subito operativi con AngularJS, ma anche per mettere insieme l'applicazione in un modo che sia mantenibile ed estensibile.
Il sito Web di AngularJS, http://angularjs.org, contiene numerosi esempi di lavoro e un'eccellente documentazione. Raccomando anche di controllare la straordinaria community sulla mailing list di AngularJS.
Fatemi sapere cosa ne pensate!
