AngularJS: un framework di frontiera per la realizzazione di siti Web

Transcript

1 Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell Informazione, delle Infrastrutture e dell Energia Sostenibile Corso di Laurea in Ingegneria dell Informazione Tesi di Laurea AngularJS: un framework di frontiera per la realizzazione di siti Web Relatore Prof. Domenico Ursino Candidato Cristiano Antonio Capanna Anno Accademico

2

3 Siamo prog ammati per andare avanti

4

5 Indice Introduzione 1 Capitolo 1 Che cos è AngularJS La storia Le principali caratteristiche Template Directive Expression Data-Binding Module Capitolo 2 Come utilizzarlo L installazione Primo esempio Secondo esempio Capitolo 3 Alcune applicazioni Web SEO e AngularJS Dispositivi mobili Responsive web app Applicazioni native con Cordova Capitolo 4 Analisi dei concorrenti Altri framework Ember.js Backbone.js Knockout.js AngularJS vs jquery? I due Data-Binding I

6 4.2.2 La verità è Capitolo 5 Le ultime battute Riepilogando AngularJS Ringraziamenti Bibliografia.. 57 II

7 III

8 IV

9 Introduzione L HTML è un linguaggio di markup solitamente usato per la formattazione e l impaginazione di documenti ipertestuali. I documenti HTML sono in grado di incorporare molte tecnologie che offrono la possibilità di aggiungere al documento ipertestuale interazioni dinamiche con l utente, animazioni interattive, contenuti multimediali, e molto altro ancora. Si tratta di linguaggi CSS, JavaScript, jquery, XML e JSON. JavaScript è un linguaggio di scripting orientato agli oggetti e agli eventi, comunemente utilizzato nella programmazione web lato client; esso viene impiegato all interno di altri linguaggi come, ad esempio, HTML. Per dar vita ad una pagina web si può utilizzare contemporaneamente HTML (per creare il template) e JavaScript (per creare la parte dinamica). Ma, nonostante la presenza di questi due linguaggi, definire la struttura di una pagina risulta difficile; per superare tali differenze che vengono in aiuto i framework. Un framework è un architettura logica di supporto su cui un software può essere progettato e realizzato, spesso facilitandone lo sviluppo da parte del programmatore. Sono molti i framework esistenti nel mondo dell open-source, e non ne esiste uno migliore in assoluto; la scelta dipende, ovviamente, dall utente che vuole utilizzarlo. Quello che presenteremo oggi sarà AngularJS. AngularJS è un framework JavaScript che permette di utilizzare il linguaggio HTML, assieme ad un insieme di suoi costrutti nativi, per sviluppare applicazioni single web page. Tale framework, basato sul pattern MVC, ha avuto un gran successo, soprattutto negli ultimi anni, grazie ad investimenti ricevuti da Google per svilupparne le capacità. AngularJS fu ideato nel 2009 da due sviluppatori, Misko Hevery e Adam Abrons. Il secondo abbandonò il progetto quando il primo, dopo essere stato assunto dalla Google, iniziò ad utilizzarlo per agevolare la scrittura del codice su cui stava lavorando. La multinazionale capì subito le potenzialità di AngularJS; infatti, iniziò ad utilizzarlo per riscrivere le applicazioni delle compagnie che andava via via acquisendo. Google creò un team che iniziò a lavorare esclusivamente sul framework aggiornandolo e mantenendolo all avanguardia. Le caratteristiche principali che fanno di AngualrJS uno tra i framework più cliccati ed utilizzati sono: Template; permette di utilizzare HTML in cooperazione con attributi specifici di AngularJS. Dal momento che AngularJS si basa sul pattern MVC, possiamo considerare il Template come la View che raccoglie informazioni provenienti dal Model e dal Controller.

10 Directive; sono le componenti fondamentali dell applicazione AngularJS; di default, ci viene offerta una vasta gamma di Directive; ciò non toglie che è possibile creare le nostre, in modo da personalizzare completamente l applicazione creata. Expression; è considerata la parte dinamica del codice, che può sostituire o lavorare in cooperazione con JavaScript. Data-Binding; è l innovazione più importante di AngularJS, e rappresenta la sincronizzazione automatica del codice tra View, Model e Controller. La differenza del Data-Binding con gli altri framework è che questa sincronizzazione viene effettuata automaticamente da Angular, e non manualmente, come negli altri framework. Module; è ciò che rende snodabile il codice delle pagine web create; possiamo, quindi, vederle i Module come contenitori che racchiudono le diverse parti del sito. Come detto, AngularJS non è l unico framework open source per costruire applicazioni single web page; infatti, ne esistono diversi, ciascuno dei quali presenterà vantaggi e svantaggi rispetto ad AngularJS. I principali concorrenti sono: Ember.js; basato sul pattern MVC, si pone come obiettivi quelli di: aiutare l utente a creare la parte client side delle applicazioni, adattarsi e, al contempo, evolversi rispetto alle nuove tecnologie. È un framework più vecchio rispetto ad AngularJS in quanto, la sua creazione risale al 2007; in un secondo momento il suo sviluppo è stato portato avanti dalla Apple. Backbone.js; è un framework famoso per la sua leggerezza; ha un interfaccia Restfull JSON basata sul pattern MVC. La sua leggerezza è sia un vantaggio, sia uno svantaggio, in quanto se da un lato lo rende estremamente rapido, con una curva di apprendimento lineare, dall altro non gli consente di garantire allo sviluppaotre la possibilità di realizzare un architettura stabile. Knockout.js; è una libreria che si basa sul pattern MVVM (variante del pattern MVC). Questa libreria non fornisce aiuti nella gestione del DOM, ma si focalizza sulla creazione dell interfaccia utente, riducendo la quantità del codice da scrivere. In ultimo, abbiamo la libreria jquery; questa aiuta gli sviluppatori nella manipolazione del DOM attraverso l uso di API chiare e semplici. jquery è stata rilasciata per la prima volta nel 2006, ed è un progetto tutt ora in via di sviluppo grazie anche all apporto di Microsoft. Molti sviluppatori considerano jquery come un concorrente di AngularJS; in realtà, vi è la possibilità di cooperazione tra il framework e la libreria (o meglio, i suoi plugin), soprattutto grazie all ultima versione di AngularJS che sarà rilasciata (AngularJS 1.4) L uso di AngularJS non si limita alla creazione di applicazioni single web page; il framework, infatti, può essere utilizato anche per la creazione di applicazioni per dispositivi mobili. Ovviamente, quest ultime saranno applicazioni di tipo ibride, soprattutto se create in cooperazione con Cordova. AngularJS fornirà dei vantaggi e degli svantaggi; in particolare la snodabilità viene senz altro aumentata grazie, anche, all aiuto di AngularJS. VI Cristiano Antonio Capanna

11 AngularJS: un framework di frontiera per la creazione di siti Web Il presente lavoro di tesi è strutturato come di seguito specificato: Nel primo capitolo vengono presentate la storia che sta alla base della nascita del framework AngularJS, le sue caratteristiche e, per le più importanti tra queste ultime, una descrizione più dettagliata. Il secondo capitolo spiegherà in che modo poter avere Angular nella nostra piattaforma di sviluppo; saranno presentati due facili esempi per vederne le potenzialità rispetto alla programmazione web. Nel terzo capitolo saranno descritti i vantaggi nell utilizzo web sia rispetto la programmazione sia rispetto alla visibilità all interno del web (dando un occhiata alla tecnologia SEO); in più, verrà descritta la possibilità di utilizzare Angular anche per lo sviluppo di applicazioni su dispositivi mobili. Il quarto capitolo presenterà i framework concorrenti di AngularJS, ne espliciterà i vantaggi e gli svantaggi e spiegherà la possibilità di integrare Angular con jquery. Infine, nel quinto capitolo verranno tratte le conclusioni e verranno illustrati alcuni possibili sviluppi futuri. Cristiano Antonio Capanna VII

12 VIII Cristiano Antonio Capanna

13 Capitolo 1 Che cos è AngularJS AngularJS è un framework di JavaScript, patrocinato da Google. È open-source ed è rilasciato sotto la licenza MIT (una licenza di software libero creata dal Massachusetts Institute of Technology). Il suo obiettivo è quello di risolvere i problemi riguardanti la creazione di Single Page Web Application. Questo framework ci permette di utilizzare HTML come linguaggio di template. La sua logica è basata sul pattern MVC. In questo capitolo vedremo la storia e le principali caratteristiche che fanno di AngularJS uno dei più utilizzati framework degli ultimi anni.

14 1.1 La storia AngularJS è stato creato, come progetto parallelo, nel 2009 da due sviluppatori, Misko Hevery e Adam Abrons. I due, inizialmente, immaginavano che il loro progetto, GetAngular, sarebbe diventato un strumento end-to-end e che avrebbe permesso ai designer di interagire sia con il front-end sia con il back-end. Hevery iniziò a lavorare per un progetto della Google chiamato Google Feedback. Lui e altri due sviluppatori scrissero linee di codice in un periodo che andava fino ad oltre i sei mesi. Ma, mentre la grandezza del codice andava aumentando, la pazienza di Hevery andava diminuendo; si sentiva sempre più frustrato per le difficoltà riscontrate nel testare e modificare il codice che lui ed il suo team avevano scritto. Quindi Hevery fece una scommessa con il suoi project-manager, Brad Green: sarebbe riuscito a riscrivere l intera applicazione usando la parte di progetto di GetAngular in sole due settimane riducendo drasticamente le linee di codice. Hevery perse la scommessa in quanto non riuscì a riprodurlo riprodurlo nei giusti tempi ma impiegò tre settimane. In compenso, riuscì ad eliminare dalle linee di codice più del 90% riducendole a sole Green prese ovviamente nota del successo dello sviluppatore e quello fu il punto di partenza che iniziò a dar vita a AngularJS. Il secondo creatore di GetAngular, Adam Abrons smise di lavorare al progetto quando Hevery e il suo projectmanager lo trasformarono in un nuovo progetto chiamato, appunto, AngularJS. Costruirono un team per elaborare e mantenere il nuovo progetto all interno della stessa Google. Una delle vittorie più grandi di Angular, internamente a Google, si ebbe quando una compagnia acquisita dalla multinazionale, DoubleClick, iniziò a riscrivere parte della sua applicazione utilizzando AngularJS. Dato l iniziale successo che DobleClick ebbe, Google investì più risorse nel suo nuovo framework, dando la possibilità di gestire sia la parte interna a DoubleClick, sia quella esterna. Iniziarono ad aumentare le persone che si occupavano dello sviluppo e il framework inizò a crescere rapidamente. I principali sviluppatori di questo framework fanno parte, appunto, di Google, come si può notare anche dalla tabella 1.1 e 1.2: 10 Cristiano Antonio Capanna

15 AngularJS: un framework di frontiera per la realizzazione di siti Web Tabella Sviluppatori di AngularJS dalla creazione al 08/02/2014 Tabella Sviluppatori di AngularJS dalla creazione al 25/08/2014 Cristiano Antonio Capanna 11

16 È inusuale ed, economicamente parlando, rischioso vedere un framework controllato da un'unica entità, ma, al contempo, ci sono molti vantaggi in ciò, uno tra i quali evitare le lotte per accaparrarsi l esclusiva. Nel mondo dell open-source queste lotte sono pubbliche, cattive e distruttive per il software stesso o per i clienti che vogliono utilizzarlo (un esempio di scontro tra due compagnie può essere quello dietro Node.js, e le due compagnie sono: Jovyent e Strongloopp). È ovvio che esistano contributi da parte di sviluppatori che non fanno parte della Google family, il primo che possiamo notare è Sahahar Talmi facente parte della compagnia chiamata Wix (potremmo inserire all interno dei no-googler Ken Sheedlo, ma, in realtà, la maggior parte dei suoi lavori per AngularJS furano fatti mentre era all interno di Google). Un altro importantissimo fatto da assumere è che i più importanti sviluppatori di Angular non hanno iniziato con Google, ma, dopo l apporto al framework, sono stati assunti dalla multinazionale. Questo ci fa capire l importanza degli investimenti che Google fa su AngularJS. 1.2 Le principali caratteristiche Le caratteristiche che fanno di AngularJS uno dei framework più utilizzati sono: Templates: è formato dal linguaggio HTML con markup addizionali; Directive: estendono il linguaggio HTML con attributi ed elementi; Model: riporta i dati che l utente vede nella View e con cui interagisce; Scope: è il contesto in cui il Model e il Controller sono collocati e dove le Directive e le Expression possono accedervi; Expression: variabili d accesso e funzioni provenienti dallo Scope; Compiler: analizza il template, le Directive e le Expression; View: quello che l utente vede (il DOM); Data Binding: sincronizza i data tra Model e View; Controller: la logica di business dietro la View; Dependency Injection: crea e collega gli oggetti e le funzioni; Injector: contenitore del Dependency Injector; Module: un contenitore per le differenti parti di un applicazione, inclusi Controller, Services, Filter, Directive, che configurano l Injector; 12 Cristiano Antonio Capanna

17 AngularJS: un framework di frontiera per la realizzazione di siti Web Service: logica di business riutilizzabile, indipendente dalla View. Nelle prossime sezioni descriveremo alcune di tali caratteristiche Template In AngularJS, il Template è scritto tramite HTML che contiene elementi e attributi specifici di Angular. Tale framewok combina il Template con informazioni provenienti dal Model e dal Controller per rendere dinamica la View, cioè quello che l utente vede all interno del Browser. Gli elementi che contribuiscono al dinamismo della View sono: Directive (che descriveremo meglio in seguito); Markup: la notazione a doppia parentesi graffa { { } } che ci indica la costruzione di un elemento o di un attributo; Filter: il formato dei data per il display; Form control: validazione degli input utente. In una semplice applicazione, il Template consiste in un insieme di codici HTML, pagine CSS e Directive contenute in un file HTML (genericamente index.html). In un applicazione più complessa è possibile visualizzare più viste all interno di una pagina principale, con alcuni segmenti di Template localizzati in file di HTML separate. Possiamo utilizzare la Directive ngview per caricare questi segmenti Directive Le Directive sono le componenti più importanti di ogni applicazione Angular. Sebbene tale framework abbia al suo interno un vasta gamma di Directive, possiamo comunque introdurre e creare Directive semplici nel momento in cui vogliamo creare una nuova applicazione. Una Directive è qualcosa che introduce una nuova sintassi. Le Directive sono marcatori degli elementi del DOM, che forniscono ad essi degli specifici comportamenti. Per esempio, il linguaggio statico di HTML non saprebbe come creare e mostrare un data picker widget (cioè un applicazione per visualizzare i dati). Per "insegnare" al linguaggio HTML questa nuova sintassi abbiamo bisogno delle Directive. Le Directive, in qualche modo, creeranno un elemento che si comporterà da data picker. Le Directive più semplici che possiamo elencare sono: ng-model; ng-show; ng-repeat. Cristiano Antonio Capanna 13

18 Tutte queste Directive fanno assumere agli elementi del DOM un determinato comportamento, ad esempio ng-repeat ripete uno specifico elemento e ng-show mostra un elemento. Se volessimo rendere un elemento trascinabile potremo creare una Directive per farlo. L'idea di base dietro le Directive è veramente semplice: esse rendono il nostro codice HTML estremamente interattivo allegando comportamenti differenti ai vari DOM. Le Directive di Angular sono disponibili in quattro aspetti differenti: un nuovo elemento HTML (ad esempio, <data-picker></date>); un attributo su un elemento (ad esempio, <input type= text datapicker/>); una classe (ad esempio, <input type= text class= data-picker />); un commento (ad esempio, <!- -directive:data-picker- ->). Ovviamente, abbiamo il controllo di come le nostre Directive appariranno nel codice HTML Expression Le Expression in Angular sono come codici JavaScript inserite genericamente all interno delle doppie parentesi graffe ( {{expression}} ). Alcuni esempi di Expression valide all interno di Angular sono i seguenti: 1+2; a+b; user.name; Item[index]. Per quanto riguarda le differenze che intercorrono tra le Expression di AngularJS e quelle di JavaScript possiamo osservare che: Le Expression di AngularJS, a differenza delle espressioni JavaScript, non hanno accesso alle variabili globali come window, document o location. Questa restrizione è intenzionale, in quanto proviene bug all interno dell applicazione. A parte l operatore ternario (a? b : c ), non si può utilizzare un flusso di controllo all interno di un Expression. La ragione dietro questa impossibilità è data dalla filosofia di AngularJS, cioè la logica delle applicazioni deve essere esclusivamente contenuta all interno del Controller, non nella View. Se necessitiamo di una vera condition, di un loop o, comunque, di un flusso dobbiamo delegare il tutto a metodi di JavaScript e non di AngularJS. 14 Cristiano Antonio Capanna

19 AngularJS: un framework di frontiera per la realizzazione di siti Web Non possiamo dichiarare le funzioni o le espressioni regolari (cioè un insieme di stringhe) all interno delle Expression; questo per evitare che modelli complessi vadano a trasformare in qualche modo qualcosa all interno dei Template. Quindi, è preferibile porre le funzioni e le espressioni regolari all interno di un filtro dedicato o di un controllore in modo da poter essere testate correttamente. Non possiamo utilizzare operazioni con comma e void. Possiamo utilizzare Filter all interno delle Expression per formattare i data prima che questi vengano visualizzati. Siamo perdonati quando utilizziamo valori del tipo undefined e null. Se volessimo utilizzare dei codici JavaScript più complessi di quelli copiabili da Angular dovremmo dichiararlo anticipatamente per poi richiamarlo all interno della View Data-Binding Come detto, AngularJS basa la sua logica sul design pattern MVC (Model-View-Controller), cioè sulla separazione delle responsabilità. Possiamo dare i seguenti significati alle tre componenti del pattern: Model: questa classe si occupa solo dello stato e della logica dell applicazione; View: questa classe si occupa solo della gestione delle interfacce utente in risposta ad aggiornamenti generici che riceve dal Model; Controller: questa classe si occupa di tradurre l input dell utente in aggiornamenti che vengono poi passati al Model; Con il termine Data-Binding, nelle applicazioni AngularJS, si intende la sincronizzazione automatica dei dati tra i componenti del Model e della View. Il modo con cui Angular implementa il Data-Binding fa sì che il Model possa essere considerato come l unica fonte di verità della nostra applicazione; la View può essere vista come una proiezione del Model. Quando il Model cambia, la View riflette i cambiamenti, e viceversa. Molti dei sistemi classici di templating hanno il Data-Binding in un unica direzione, ovvero uniscono il Template e le componenti del Model all interno della View. Dopo l unione, però, i cambiamenti al Model o alle relative sezioni della View non vengono automaticamente riflessi. Allo stesso modo, i Cristiano Antonio Capanna 15

20 cambiamenti che vengono fatti all interno della View non sono riflessi all interno del Model. Questo significa che gli sviluppatori devono sincronizzare manualmente la View con il Model, e viceversa, ogniqualvolta vengono effettuati dei cambiamenti. Il Template di Angular lavora differentemente. Prima esso (che consiste in codice HTML non compilato, insieme a qualsiasi altro markup o Directive supplementare) viene compilato nel browser. Gli step di compilazione producono una View in diretta. Ogni cambiamento all interno della View è immediatamente riflesso nel Model e ogni cambiamento del Model è immediatamente riflesso nella View. Il Model sarà l unica fonte di verità per l applicazione semplificando notevolmente la vita al programmatore. Possiamo pensare, quindi, che la View è semplicemente una riflessione istantanea del Model. Dal momento che la View è una proiezione del Model, il Controller è completamente separato dalla View ed ignora la sua esistenza; questo ci aiuta anche nel testing, che sarà molto più semplice e veloce Module Possiamo pensare un Module come un contenitore per le differenti parti di un applicazione: Controller, Service, Filter, Directive, etc. Perché utilizzare i Module? Molte applicazioni hanno un metodo principale (main method) che istanzia e collega le altre parti. Le applicazioni in Angular non hanno questo metodo; saranno le specifiche dichiarate all interno del Module a dirci come inizializzare l applicazione. Ci sono, ovviamente, importanti vantaggi nell utilizzare tale approccio: Il processo dichiarativo è più facile da comprendere. È possibile impacchettare il codice come Module riutilizzabili. I Module possono essere caricati in qualunque ordine (o eventualmente in parallelo, eccetto quando sono dipendenti l uno dell altro). La Unit Test (cioè il caricamento di piccoli sottoinsiemi dell applicazioni che vengono sottoposti a stimoli da parte dei Module) deve caricare solo i Module rilevanti, ovvero quelli destinati direttamente al testing, cosa molto più semplice rispetto al caricamento completo di tutti i Module o, comunque, di parti che non hanno niente a che fare con il testing. Ciò rende estremamente concentrato il nostro codice. Il Test end-to-end può usare i Module per sovrascrivere le configurazioni. Possiamo provare a dare ai Module una nuova definizione: un Module è un insieme di blocchi di configurazione e di blocchi di esecuzione che vengono applicati durante l inizializzazione di un 16 Cristiano Antonio Capanna

21 AngularJS: un framework di frontiera per la realizzazione di siti Web processo. Se teniamo in considerazione questa semplice definizione, un Module consiste in una collezione di due tipi di blocchi: Blocchi di configurazione: vengono eseguiti durante le registrazioni del provider in fase di configurazione. All interno di tali blocchi possiamo inserire solo i provider e delle costanti; evitiamo, in tal modo, che ci siano istanze prima del completamento delle configurazioni. Blocchi di esecuzione: vengono eseguiti dopo che l iniettore è stato creato e usato per l inizio dell esecuzione. All interno di tali blocchi possiamo inserire esclusivamente le istanze e alcune costanti; in questo modo preveniamo la presenza di configurazioni durante l esecuzione dell applicazione. I Module possono avere delle dipendenze tra di loro, cioè un Module può richiedere le prestazioni di un altro Module. Le dipendenze dei Module implicano che dapprima bisogna caricare il Module richiesto e, solo successivamente, il Module richiedente. In altre parole il blocco di configurazione del Module richiesto viene eseguito prima di quello richiedente. La stessa cosa avviene per quanto riguarda i blocchi di esecuzione. Un Module può essere caricato una sola volta anche se viene richiesto da più Module. Cristiano Antonio Capanna 17

22 18 Cristiano Antonio Capanna

23 AngularJS: un framework di frontiera per la realizzazione di siti Web Capitolo 2 Come utilizzarlo La prima parte di questo capitolo spiegherà come impostare il nostro dispositivo per lo sviluppo tramite AngulaJS. La seconda parte presenterà una facile demo delle prestazioni del framework. Cristiano Antonio Capanna 19

24 2.1 L installazione L'utilizzo di AngularJS è affidato a due metodi: con il primo avremo la necessità di importare il pacchetto JavaScript ogni volta che iniziamo il progetto, nella parte interessata, oppure nell'header; il secondo ci porta a scaricare AngularJS attraverso GitHub (un servizio di web hosting per lo sviluppo di progetti software che può essere utilizzato per la condivisione e la modifica di file di testo e documenti revisionabili) e Node.JS (si tratta di un framework relativo all'utilizzo server-side di JavaScript) così da poterlo avere a nostra disposizione immediatamente durante la compilazione del codice. Per il primo metodo abbiamo bisogno solo di copiare e incollare una linea di codice all'interno dell'header, facendolo, però, per ogni progetto che iniziamo. Per il secondo dovremo dedicare qualche minuto in più: vediamo come. Possiamo scaricare e installare GitHub da Dopo aver eseguito i tradizionali passi per l installazione, passiamo a Node.JS; il link in cui trovarlo è anche in questo caso dovremo compiere i soliti passi per l installazione. Figura 2.1 Informazioni di Git visualizzati dal prompt dei comandi 20 Cristiano Antonio Capanna

25 AngularJS: un framework di frontiera per la realizzazione di siti Web Figura Informazioni di Node.JS visualizzati dal prompt dei comandi Potremo verificare la corretta installazione dei due programmi attraverso la finestra terminale (il prompt dei comandi), inserendo prima il codice git, che farà apparire una serie di informazioni riguardanti la versione e alcuni comandi da poter utilizzare (Figura 2.1). Analogo discorso potrà essere fatto con Node.JS; il comando che verrà utilizzato per vedere le informazioni sarà npm (Figura 2.2). Per quanto riguarda GitHub i comandi che dovremo conoscere, da inserire all interno del prompt, saranno esclusivamente due: git clone: per copiare un repository remoto all interno del nostro PC; git checkout: per estrarre una particolare versione del codice che sarà successivamente utilizzato. Utilizziamo il primo dei due codici elencati associando l indirizzo in cui è contenuto il repository di AngularJS: git clone In seguito a ciò creata una directory in cui sono contenuti tutti i file del repository. Entriamo in questa cartella attraverso il codice cd angular-phonecat e con il comando npm install, importeremo i tool di cui avremo bisogno. A questo punto installeremo Bower (cioè un package contenente i codici client-side di AngularJS da ad utilizzare); il codice che utilizzeremo sarà bower install. Al termine di questi passi, all interno della cartella app contenuta nella directory anguar-phonecat, avremo un file index.html che apriremo con il nostro browser (ma, in questo caso, risulterà una pagina bianca) o con l aiuto di un area di sviluppo come Notepad++ (Figura 2.3). Cristiano Antonio Capanna 21

26 Figura File index.html visualizzato tramite Notepad++ Tutto quello che vediamo all interno di questo codice non è altro che i pacchetti di AngularJS che sono stati importati e che quindi sono pronti all uso. A questo punto, possiamo creare il nostro esempio all interno di questo stesso file. 2.2 Primo esempio Come specificato nella sessione precedente, i modi per importare la libreria Angular sono due; noi stiamo considerando il secondo (che prevede importare tutti i pacchetti prima, attraverso Bower), ma se dovessimo tenere in considerazione il primo, il riferimento alla libreria sarà, ovviamente, necessario affinché Angular sia attivo. Quello che avviene in corrispondenza del caricamento del codice della libreria è il cosiddetto bootstrap di AngularJS. In sintesi, dopo il caricamento del documento HTML da parte del browser, vengono creati alcuni oggetti di sistema e viene effettuata la compilazione del DOM a partire dall elemento marcato con il tag ng-app, elaborando ogni Directive, binding ed Expression incontrati. Al termine della fase di bootstrap, AngularJS si mette in attesa del verificarsi di eventi sul browser. 22 Cristiano Antonio Capanna

27 AngularJS: un framework di frontiera per la realizzazione di siti Web Cerchiamo di capire immediatamente a cosa serve il primo tag di AngularJS che abbiamo introdotto, ovvero ng-app; questo attributo rappresenta una Directive del framework e indica al sistema quale elemento della pagina deve essere considerato come elemento base dell applicazione. In altre parole, AngularJS prenderà il controllo della porzione di DOM le cui basi vengono marcate con la direttiva ng-app. Figura Codice del primo esempio Andiamo quindi all interno dell elemento <body> (tag di HTML che conterrà il corpo del codice) e creiamo un elemento strutturale della pagina attraverso l attributo <div>. All interno di esso inseriremo due <input>: Cristiano Antonio Capanna 23

28 <input type= number ng-model= addendo1 />; <input type= number ng-model= addendo2 />; Gli <input> sono tag che rientrano nella categoria <form>, cioè elementi che danno la possibilità di interagire con il contenuto della pagina. Nel nostro specifico caso ci daranno l opportunità di inserire un valore numerico. Veniamo, quindi, all elemento chiave della nostra pagina cioè la stringa {{addendo1 + addendo2}}. Questa rappresenta una Expression di AngularJS e viene valutata ed inserita nel DOM del framework. Una Expression, tuttavia, non viene valutata soltanto in fase di compilazione; infatti viene generato un aggiornamento automatico (binding) che aggiorna il risultato dell Exspression ogniqualvolta cambia il suo valore. Vediamo, nella Figura 2.4, il codice completo e, nella Figura 2.5, il risultato. Figura Esecuzione del primo esempio 2.3 Secondo esempio In questo secondo esempio, proveremo a creare un catalogo di foto on-line. Come detto, AngularJS si basa sul pattern MVC; proviamo, quindi, a gestire l implementazione di questo catalogo creando prima la View, poi il Controller (il Model sarà creato automaticamente con l implementazione del Controller). Portiamoci all interno del tag <body> e scriviamo il seguente codice: 24 Cristiano Antonio Capanna

29 AngularJS: un framework di frontiera per la realizzazione di siti Web <body ng-controller= PhotoListCtrl > L elemento ng-controller indica, semplicemente, qual è il Controller associato all elemento (la sua dichiarazione verrà esplicitato in seguito). Creiamo, all interno del body, una elenco non ordinato attraverso i tag <ul> e <li>, inserendo, in quest ultimo, l elemento ng-repeat= photo in photos, che indica al sistema di generare tanti elementi <li> per quante sono le foto contenute nel Model, basandosi sull espressione photo in photos, come vedremopiù avanti. In corrispondenza a ciascun elemento <li> saranno valutate le espressioni specificate in base al contesto corrente, cioè in base alla foto corrente. A questo punto apriamo un paragrafo con <p> inserendo al suo interno il codice: <img ng-src= photos/thumb/{{photo.file}} alt={{photo.description}} />alt={{photo.description}} /> Questo tag, o meglio l elemento ng-src, sostituisce l attributo standard src (che sta per source, cioè origine, ed è il percorso in cui il browser troverà il file da mostrare) dell elemento <img> (in HTML è l elemento che viene utilizzato per inserire e formattare le immagini, i diagrammi grafici e le fotografie) ed impedisce che il browser interpreti l espressione {{photo.file}} come l URL delle immagini da caricare ed effettui un infruttuosa richiesta al server. Prima di chiudere il paragrafo con (</p>) scriviamo l espressione {{photo.description}}. Chiudiamo, quindi, il paragrafo e anche l elenco (figura 2.6). Passiamo, quindi, alla definizione del Controller che si limiterà a creare il Model per la nostra applicazione; tale Controller sarà costituito da un array di oggetti JSON (formato per lo scambio di dati) con due proprietà: l URL della foto e la relativa descrizione. La cosa interessante è che la funzione riceve dal sistema lo Scope corrente, cioè l oggetto di sistema che consente la sincronizzazione tra Model e View, tramite il parametro $scope. Da notare che per convenzione tutti gli oggetti di sistema di AngularJS hanno il nome che inizia per $. Lo Scope corrente sarà l ambiente di valutazione delle espressioni incluse all interno dell elemento gestito dal Controller, nel nostro caso l elemento <body>. All interno di questo Scope verrà creato un array di oggetti JSON che rappresentano l elenco delle foto, quindi vengono valutate le espressioni assegnate ad essa. Nel nostro specifico caso l espressione ng-repeat photo in photos consente di selezionare, per ciascuna ripetizione, un elemento dell array photos assegnandolo alla variabile photo. Tramite questa variabile abbiamo accesso alle singole proprietà dell oggetto che rappresenta la foto. Il risultato è mostrato dalla Figura 2.8. In ultimo, proviamo ad introdurre nel catalogo fotografico la possibilità di filtrare l elenco delle foto. AngularJS ci consente di realizzare questa funzionalità in maniera abbastanza semplice. Cristiano Antonio Capanna 25