Introduzione ad AngularJS

AngularJS è un framework open-source per web application progettato con l'intento di rendere lo sviluppo e il test più semplici per lo sviluppatore. E' un framework client-side MVC/MVVM totalmente estendibile che non necessità di altre librerie e funziona anche con altri framework. Essendo JavaScript puro, AngularJS è perfetto per creare una applicazione web mono pagina, richiede solo linguaggi client-side come HTML, CSS e JavaScript. La cosa migliore è che potrete modificare o sostituire ogni funzionalità a seconda delle vostre esigenze di progetto.

Sviluppato dai talentuosi ingegneri di Google Miško Hevery e Adam Abrons, AngularJS è definito come "Superheroic JavaScript MVW framework for dynamic web apps" che permette di utilizzare HTML come template e permette di estendere il vocabolario HTML, così potrete dichiarare i vostri componenti applicativi in maniera concisa e chiara. Aiutandovi a strutturare e a testare al meglio il vostro codice JavaScript, AngularJS istruisce il browser per farlo diventare il partner ideale per qualsiasi tecnologia server utilizzando la dependency injection (DI) e l'inversion of control (IoC). Il principale obiettivo di questo framework strutturale è di aumentare la capacità MVC (Model View Controller) delle applicazioni web.

Funzionalità Principali

A differenza di molti altri framework, AngularJS è un framework avanzato che ha alcune funzionalità di rilievo che sono utili non solo agli sviluppatori ma anche ai designers. Di seguito alcune funzionalità interessanti di AngularJS, che permettono di sviluppare applicazioni web di ultima generazione.

Direttive

Le direttive sono la funzionalità più unica, predominante e potente disponibile solo in AngularJS. Permettono di creare componenti HTML personalizzati e riusabili, che possono essere utilizzati per nascondere la complessità della struttura DOM e permettono di "decorare" alcuni elementi con comportamente specifici. Vi consentono di estendere il vostro HTML permettendovi di inventare nuove sintassi HTML, e istruendo AngularJS per incorporare le loro funzionalità nella pagina. Hanno il prefisso "ng-", saranno inserite come attributi HTML e funzionano come elementi standalone.

Queste le direttive più usate:

ng-app: Questa direttiva dichiara un elemento come elemento root dell'applicazione e tipicamente vine posizionato all'interno del tag <body> o <html>. <html ng-app> è sufficiente per dichiarare una pagina come applicazione Angular. ng-bind: Sostituisce il testo contenuto in un componente HTML con il contenuto di una espressione, e l'aggiorna se l'espressione viene modificata. ng-controller: Permette di definire una classe controller JavaScript per risolvere le espressioni HTML. ng-model: E' simile a ng-bind, ad eccezione del fatto che è responsabile del data binding bidirezionale tra lo scope definito nel model e nel view. ng-repeat: Permette di instanziare un template per item, con cui ciclare sulle variabili di una collection. ng-class: Questa direttiva permette di caricare dinamicamente gli attributi di classe ngif: Questa direttiva di if dichiarativa è usata per reinserire o eliminare un elemento dal DOM, a seconda del valore true o false. ng-hide e ng-show: Queste direttive consentono di mostrare o nascondere un elemento.

Di seguito un semplice esempio di direttiva, che prima si mette in ascolto di un evento e quindi applica le modifiche richieste nel suo $scope.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '<input>' }; });

Potrete usare questa direttiva personalizzata come segue:

<my-component ng-model="message"></my-component>

Data Binding Bidirezionale

Il Data-Binding è la seconda funzionalità più potente di AngularJS. Permette di eliminare una buona parte di codice inutile che avreste bisogno di scrivere lato server per la gestione dei template. Solitamente l'80% del codice di una web application è dedicato alla manipolazione, navigazione e all'ascolto degli eventi DOM. Il data binding di AngularJS nasconde questo codice, permettendovi di focalizzarvi sugli altri aspetti vitali della vostra web application.

Generalmente, in molti sistemi di templating, il data binding è presente solo in una sola direzione. Il sistema classico di template unisce template e model nella view. Dopo questo merge, le modifiche avvenute nei componenti model e nelle altre sezioni della view non sono riportate nella view automaticamente. Sbagliato, qualsiasi alterazione fatta dall'utente nella view non saranno riportate nel model. Questo significa, che se vogliamo mantenere sincronizzati model e view e il view con il model, gli sviluppatori dovranno manipolare manualmente gli elementi e gli attributi del DOM.

Quando un utente fa qualsiasi modifica alla view, questo processo diventa sempre più arduo e complicato. Questo a causa del fatto che lo sviluppatore deve interpretare le iterazioni dell'utente, facendo il merge nel model, e aggiornando il model con qualsiasi cambiamento del view.

In altre parole, il template AngularJS funziona in maniera differente e migliore. Risparmiando allo sviluppatore l'onere di inserire dati nella view manualmente, automaticamente sincronizza i dati tra il model e il view e viceversa.

Questo un esempio di binding di un valore input ad un tag <h1>.

<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello, {{yourName}}!</h1> </div> </body> </html>

Dependency Injection

AngularJS dispone di un sistema di injection integrato che si occupa di creare componenti, caricare dipendenze e di passare questi agli altri componenti se necessario. Il Dependency Injection in AngularJS permette agli sviluppatori di dichiarare come la web app è collegata. Utilizzando il dependency injection AngularJS porta i tradizionali servizi lato server sul client. Questo alleggerisce il lavoro sul server di backend e permette di avere performance migliori.

Per avere accesso ai servizi core di AngularJS, dovrete semplicemente aggiungere quel servizio come parametro. AngularJS rileverà automaticamente che avete richiesto quel servizio e vi fornirà una istanza.

function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Inoltre, potrete anche definire il vostri servizi personalizzati ed usare l'injection per averli a disposizione.

module('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'];

Templates

In AngularJS i template sono scritti in HTML, contengono componenti ed attributi specifici di AngularJS. AngularJS effettua il merge del template con le informazioni (dal model e controller) per visualizzare view dinamiche per un utente nel browser.

Di seguito i tipi di attributi ed elementi che AngularJS utilizza:

Directive: Questo elemento o attributo potenzia un componente DOM esistente o visualizza un elemento DOM riusabile. Markup: Collega le espressioni agli elementi, utilizzando la doppia graffa {{ }}. Form Controls: Consente di validare l'input utente. Filter: Questo elemento formatta i dati da mostrare.

Questo un esempio che visualizza un template con direttive e notazioni con doppia graffa.

<html ng-app>  <body ng-controller="MyController"> <input ng-model="foo" value="bar">  <button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"> </body> </html>

In una semplice web application, il template contiene direttive Angular, HTML e CSS in un solo file HTML (tipo index.html). In applicazioni complesse, potrete mostrare view differenti nella pagina principale utilizzando "partials" che sono segmenti del template che saranno creati in file HTML differenti.

Testing

Visto che JavaScript è un linguaggio con tipi dinamici che non ha un compilatore in grado di rilevare molti errori, il team di AngularJS ha progettato il proprio framework per facilitare la fase di test. AngularJS contiene moltissime funzionalità per il testing delle applicazioni. Per l'end-to-end testing AngularJS utilizza "Protractor", un end to end test runner che rimuove inutili complessità e si adatta perfettamente al funzionamento di AngularJS, può eseguire Unit test. E' inoltre disponibile una estensione per il browser Chrome, chiamata AngularJS Batarang, che se usata permette di rilevare facilmente i problemi di performance e di fare debug della vostra applicazione tramite browser.

Primi passi con AngularJS

Iniziare con AngularJS è molto semplice. Per iniziare dovrete inserire pochi attributi al vostro HTML. Seguite questi pochi passi per creare la vostra prima app in 5 minuti.

Aggiungete la direttiva ng-app al vostro tag <html>. Questo attiverà AngularJS.

Inserite il tag <script> alla fine del tag <head>

Per finire, aggiungete HTML valido. Le direttive AngularJS sono accessibili tramite gli attributi HTML, mentre le espressioni sono processate con la notazione {}.

<body ng-controller=”VisitorsListCtrl”> <h1>Today's Visitors</h1> <ul> <li ng-repeat=”visitors in visitors”> {{visitor.name}} </li> </ul> </body> </html>

Nel codice appena riportato la direttiva ng-controller definisce la classe JavaScript per una data azione, mentre la direttiva ng-repeat (che è un oggetto repetitore di Angular) istruisce Angular per la creazione di una lista di elementi contenenti il nome dei visitatori.