Un'introduzione a AngularJS

Quando mi sono imbattuto in AngularJS un paio di settimane fa, sono rimasto incuriosito all'inizio. Quando ho lavorato sul set di tutorial disponibili sul sito Web di AngularJS, ero entusiasta di aver trovato questo framework.

Cos'è AngularJS? AngularJS è il (relativamente) nuovo bambino sul blocco di codice. Per citare dal loro sito Web è "un quadro strutturale per applicazioni web dinamiche" che è particolarmente adatto per creare applicazioni web a una pagina, anche se non è certo limitato a questo.

Sviluppato nel 2009 da Miško Hevery e Adam Abrons - entrambi dipendenti Google in quel momento - è interamente JavaScript e interamente lato client, quindi ovunque può essere eseguito JavaScript, AngularJS può essere eseguito. È anche piccolo: compresso e minorato è inferiore a 29 kb. Ed è open source con licenza MIT. È anche possibile utilizzare il logo, disponibile con licenza Creative Commons Attribution-ShareAlike 3.0 Unported.

Secondo Wikipedia, l'obiettivo di Angular "è di aumentare le applicazioni basate su browser con la funzionalità model-view-controller (MVC)" e fa proprio questo, fornendo un framework di binding / MVC. È un legame a doppio senso, attenzione. Delizioso. Con una struttura semplice come {{i miei dati}}, i dati vengono associati alla tua pagina. Il servizio $ scope rileva le modifiche al modello e modifica le espressioni HTML nella vista tramite i controller. Lavorando nell'altra direzione, le modifiche alla vista si riflettono nel modello. Ciò elimina la necessità della stragrande maggioranza delle manipolazioni DOM centrate sui dati che molti di noi, me incluso, danno per scontato quando si lavora con una libreria come jQuery.

Angular viene eseguito immediatamente senza dipendenze della libreria, sebbene possa essere esteso con i numerosi moduli disponibili e, naturalmente, è possibile crearne uno personalizzato in base alle proprie esigenze specifiche. Essendo puro JavaScript, ha anche il vantaggio di essere indipendente dal server.

Essendo abituato a una potente libreria come jQuery, è facile volerlo mescolare per fare cose che Angular può già fare. Riconoscendo questa potenziale trappola, gli sviluppatori hanno questo da dire: "Se stai lottando per rompere l'abitudine, considera la possibilità di rimuovere jQuery dalla tua app. Veramente. Angular ha il servizio $ http e potenti direttive che lo rendono quasi sempre inutile. "Una cosa è certa, se ti attacchi ad Angular, i loop jQuery e il back-and-go esplicito con il server saranno assenti dal tuo codice, dal momento che Angular fornisce un metodo così succinto e pulito per ottenere le stesse cose.

direttive

Angular utilizza le direttive per collegare la sua azione alla pagina. Le direttive, tutte precedute da ng-, sono posizionate in attributi html.

Alcune direttive comuni che vengono pre-costruite con Angular sono:

ng-app: questo è essenzialmente il punto iniziale di accesso di Angular alla pagina. Indica ad Angular dove può agire. è tutto ciò che serve per definire una pagina come un'applicazione angolare.

ng-bind: cambia il testo di un elemento nel valore di un'espressione.
mostrerà il valore di 'nome' all'interno dello span. Qualsiasi modifica al "nome" si riflette istantaneamente nel DOM ovunque venga utilizzata la variabile.

ng-controller: specifica la classe JavaScript per l'azione specificata. I controllori sono in genere tenuti in file .js esterni.

ng-repeat: crea le strutture del ciclo molto pulite nella tua pagina.

{{item.description}}

scorre senza sforzo attraverso ogni oggetto della collezione.

Non li ho ancora usati da me, ma ho letto che la creazione di direttive personalizzate può essere una questione delicata, qualcosa che richiede un po 'di tempo per avvolgere la tua mente. Offerte angolari a video per aiutare a chiarire il concetto.

Alcuni esempi di codice

Come accennato prima, la direttiva ng-app in tag imposta lo stage per Angular da eseguire nella pagina.

Inserisci al capo della pagina per inserire la stessa struttura angolare.

punta al file JavaScript esterno o ai file che contengono le classi JavaScript chiamate dall'app Angular. Una classe molto semplice, ad esempio, potrebbe essere:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"description": "nerf gun"}, {"description": "phone"},];} 

Passando ng-controller "ItemListCtrl", il nome della mia classe JavaScript immaginaria, dice ad Angular quale codice eseguire:

e la notazione a due parentesi indica ad Angular quali espressioni valutare.

ng-repeat è una direttiva ripetitore meravigliosamente succinta che scorre nella raccolta corrente e fa l'azione specificata o fornisce i dati specificati. È così semplice e pulito.

Stuff on my desk:
{{item.description}}

Questa semplice configurazione mostrerà:

Stuff on my desk:coffee potnerf gunphone

Certo, non sembra così impressionante, ma l'idea è di per sé. Markup e controller di pagina molto semplici rendono l'avvio con Angular, beh, molto semplice.

Anche ottenere dati reali nella tua app è piacevolmente semplice. Angular ama consumare JSON:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  } 

Questo restituisce un oggetto JSON che può essere manipolato a piacimento nell'app Angular.

Ed è costruito per testare anche tu!

Uno dei principi base su cui Angular si fondava era che le app sviluppate con esso fossero completamente testabili. Per i test end-to-end abbiamo Angular Scenario Runner per simulare le interazioni dell'utente con la tua app. Si alimentano i test di scenario scritti in JavaScript.

Per il debug nel browser, AngularJS Batarang è un'estensione di Chrome disponibile su github.

risorse

Man mano che AngularJS guadagna più trazione, saranno disponibili più risorse, ma esistono già numerosi siti che forniscono istruzioni e modi per estendere Angular.

Il Sito AngularJS di per sé, è ovviamente la tua fonte definitiva. Offrono tutorial semplici e solidi e hanno una discreta attività Presenza Google+.

Ci sono un certo numero di angolari repository su GitHub.

Moduli angolari, offre una raccolta di moduli inviati dall'utente, dai servizi di Backbone all'integrazione di Rails.

Hai già usato AngularJS? Come si confronta con librerie molto più grandi come jQuery? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine angolare via Shutterstock.