AngularJS: un framework di frontiera per la realizzazione di siti Web
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
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 Candidato
Prof. Domenico Ursino Cristiano Antonio Capanna
Anno Accademico 2014-2015
“Siamo prog ammati per andare avanti”
Indice
Introduzione………………………………………………………………………………………………………………… 1
Capitolo 1 Che cos’è AngularJS ................................................................................................... 9
1.1 La storia ........................................................................................................................... 10
1.2 Le principali caratteristiche .............................................................................................. 12
1.2.1 Template .................................................................................................................. 13
1.2.2 Directive ................................................................................................................... 13
1.2.3 Expression ................................................................................................................ 14
1.2.4 Data-Binding ............................................................................................................ 15
1.2.5 Module ..................................................................................................................... 16
Capitolo 2 Come utilizzarlo ....................................................................................................... 19
2.1 L’installazione ................................................................................................................. 20
2.2 Primo esempio................................................................................................................ 22
2.3 Secondo esempio............................................................................................................ 24
Capitolo 3 Alcune applicazioni ................................................................................................... 31
3.1 Web ................................................................................................................................. 32
3.1.1 SEO e AngularJS........................................................................................................ 34
3.2 Dispositivi mobili.............................................................................................................. 35
3.2.1 Responsive web app ................................................................................................... 36
3.2.2 Applicazioni native con Cordova................................................................................ 37
Capitolo 4 Analisi dei concorrenti .............................................................................................. 39
4.1 Altri framework ............................................................................................................... 40
4.1.1 Ember.js ................................................................................................................... 41
4.1.2 Backbone.js .............................................................................................................. 43
4.1.3 Knockout.js .............................................................................................................. 44
4.2 AngularJS vs jQuery? ...................................................................................................... 46
4.2.1 I due Data-Binding ................................................................................................... 49
I
4.2.2 La verità è… ..............................................................................................................50
Capitolo 5 Le ultime battute ...................................................................................................... 53
5.1 Riepilogando ....................................................................................................................54
5.2 AngularJS 1.4 ...................................................................................................................54
Ringraziamenti …..………………………………………………………………………………...…………………..55
Bibliografia ….…………………………………………………………………………………………………………. 57
II
III
IV
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.
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 CapannaAngularJS: 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 VIIVIII Cristiano Antonio Capanna
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.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 17.000 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 17.000
linee di codice più del 90% riducendole a sole 1.500.
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 project-
manager 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 CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Tabella 1.1 - Sviluppatori di AngularJS dalla creazione al 08/02/2014
Tabella 1.2 - Sviluppatori di AngularJS dalla creazione al 25/08/2014
Cristiano Antonio Capanna 11È 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 CapannaAngularJS: 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.
1.2.1 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.
1.2.2 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 13Tutte 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, );
un attributo su un elemento (ad esempio, );
una classe (ad esempio, );
un commento (ad esempio, ).
Ovviamente, abbiamo il controllo di come le nostre Directive appariranno nel codice HTML.
1.2.3 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 CapannaAngularJS: 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.
1.2.4 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 15cambiamenti 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.
1.2.5 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 CapannaAngularJS: 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 1718 Cristiano Antonio Capanna
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 192.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 http://git-
scm.com/download. Dopo aver eseguito i tradizionali
passi per l’installazione, passiamo a Node.JS; il link in cui
trovarlo è http://nodejs.org/download/; 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 CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Figura 2.2 - 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 http://github.com/angular/angular-phonecat.git. 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 21Figura 2.3 - 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 CapannaAngularJS: 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 1.4 - Codice del primo esempio
Andiamo quindi all’interno dell’elemento (tag di HTML che conterrà il corpo del codice) e
creiamo un elemento strutturale della pagina attraverso l’attributo . All’interno di esso
inseriremo due :
Cristiano Antonio Capanna 23;
;
Gli sono tag che rientrano nella categoria , 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 2.5 - 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 e scriviamo il seguente codice:
24 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
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 e , inserendo,
in quest’ultimo, l’elemento ng-repeat=”photo in photos”, che indica al sistema di generare
tanti elementi per quante sono le foto contenute nel Model, basandosi sull’espressione photo
in photos, come vedremopiù avanti. In corrispondenza a ciascun elemento saranno valutate
le espressioni specificate in base al contesto corrente, cioè in base alla foto corrente.
A questo punto apriamo un paragrafo con inserendo al suo interno il codice:
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 (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 () 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 .
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 25Figura2.6 - Prima parte del secondo esempio
Figura 2.7 - Seconda parte del secondo esempio
26 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Figura 2.8 - Risultato delle prime due parti di codice
Per iniziare modifichiamo la struttura del Model (quindi tramite il Controller) aggiungendo le
proprietà tag a ciascun oggetto che rappresenta una foto. Questo attributo consente di assegnare
delle parole chiave ad ogni foto (figura 2.9)
Aggiungiamo alla pagina HTML (quindi alla View) un box di ricerca tramite il tag (Figura 2.10). Ritroviamo nuovamente la direttiva ng-model che implementa il
Data-Binding tra le caselle di testo ed una variabile query del Model. È importante notare che non c’è
bisogno di dichiarare la variabile query tramite codice JavaScript: il sistema stesso genererà la variabile
e la renderà disponibile nello Scope in cui ci troviamo.
Modifichiamo, quindi, l’espressione legata alla direttiva ng-repeater in questo modo:
Con questa espressione abbiamo chiesto ad AngularJS di filtrare gli elementi dell’array photos in
base al valore della variabile query. Il filtro degli elementi dell’array è dinamico, nel senso che al variare
del valore della variabile query viene automaticamente applicato il nuovo filtro.
Il risultato è la visualizzazione delle foto che contengono, nella descrizione o tra i tag, le parole
chiave specificate dall’utente.
È possibile combinare più filtri in un’espressione tramite l’operatore pipe (|). Ad esempio, se
vogliamo filtrare le foto in base al valore inserito dall’utente ed ordinare i risultati alfabeticamente in
base alla descrizione possiamo specificare la seguente espressione:
Cristiano Antonio Capanna 27Altri tipi di filtri che possiamo utilizzare sono:
currency: formatta un valore numerico come valuta;
date: formatta una data in base al formato specificato;
limitTo: crea un nuovo array con un numero limitato di elementi appartenente
all’array originario;
lowercase: converte i caratteri di una stringa in minuscolo;
number: formatta un numero come testo;
orderBy: ordina un array in base ad un’espressione;
uppercase: converte i caratteri di una striga in maiuscolo.
Figura 2.9 - Codice con filtro
28 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Figura 2.10 - Esecuzione del codice con filtro
Cristiano Antonio Capanna 2930 Cristiano Antonio Capanna
AngularJS: un framework di frontiera per la realizzazione di siti Web
Capitolo 3
Alcune applicazioni
AngularJS può essere utilizzato per molteplici applicazioni, in ciascuna delle quali esso può presentare dei
vantaggi. Le applicazioni che trattiamo in questo capitolo sono le pagine web e i sistemi mobile; per le
prime vedremo i vantaggi e come i motori di ricerca le trattano (SEO), per i secondi vedremo la tipologia di
sviluppo effettuabile.
Cristiano Antonio Capanna 313.1 Web
Pensiamo ad Internet come ad un ufficio postale. Quando vogliamo inviare una lettera ad un amico,
prima scriviamo il messaggio in un foglio di carta, dopo scriviamo nella busta l’indirizzo del nostro
amico e mettiamo la lettera al suo interno.
Quando consegniamo la lettera all’ufficio postale, il postino controllerà l’indirizzo scritto e proverà
a consegnarla nel luogo in cui il nostro amico vive. Nel caso in cui dovesse vivere in un insieme grande
e complesso di appartamenti connessi alla strada, o ad un giardino, il postino dovrà consegnare la posta
alla reception del palazzo e sarà l’impiegato che la consegnerà al destinatario.
Fondamentalmente Internet funziona allo stesso modo; per un complesso insieme di appartamenti
collegati alla strada noi abbiamo un complesso insieme di router collegati alla rete. Ogni computer avrà
un suo indirizzo specifico e la parte del postino, o dell’impiegato, viene svolta dai browser.
Ci sono molti browser differenti; tra i più comuni troviamo, sicuramente, Chrome, Safari, Mozilla
Firefox e Internet Explorer. Tutti fanno la medesima cosa, cioè prendono la pagina web e la mostrano
all’utente.
Quando si parla di pagine web o di applicazioni mobile, viene utilizzata spesso la parola responsive;
questa indica l’adattamento della pagina in base alla risoluzione dello schermo, ed è proprio a questo
che uno sviluppatore deve aspirare, cioè ad un adattamento rapido ed efficacie di quello che crea
(pagine web o applicazioni mobile) in base al dispositivo utilizzato. AngularJS aiuta lo sviluppatore a
creare una pagina che risponda in modo efficacie alle richieste del client.
Aprendo una pagina tramite il browser, cliccando su un link della medesima, questa brillerà per un
attimo per poi caricare nuovamente l’intera pagina indicata dal link. Cliccando su qualcos’altro avremo
la stessa risposta. Cosa accade dietro le quinte?
Il browser fa una richiesta al web server per avere la pagina richiesta, tramite URL, dall’utente. Il
web server risponderà con un codice HTML (e CSS) e uno JavaScript (per la parte dinamica). Il browser,
quindi, tradurrà i linguaggi per mostrarci quello che c’è nella pagina, caricandola interamente.
A questo punto, l’utente clicca su un link all’interno della pagina caricata; avremo una nuova
richiesta da parte dell’utente. Il web server risponderà nuovamente con un altro insieme di codici HTML
e JavaScript che caricherà nuovamente, nella sua interezza, senza tenere in considerazione la pagina
che aveva caricato in precedenza (Figura 3.1)
Ovviamente, una gestione simile non è né efficiente, né, tanto meno, responsive. Cosa accade se la
pagina richiesta viene scritta tramite AngularJS?
Quello che vedremo sarà un caricamento più rapido, o meglio il caricamento sarà pressoché
impercettibile.
Quando l’utente effettua una prima richiesta per una pagina, vengono effettuate le stesse azioni
viste in precedenza, cioè il browser inoltra la richiesta al web server che risponde con un insieme di
codici HTML e JavaScript. Il browser caricherà l’intera pagina e la mostrerà.
32 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Figura 3.1 - Richiesta del browser, risposta del web server (senza AngularJS)
Ma quando l’utente clicca su un link all’interno della pagina caricata, succede qualcosa di differente
rispetto a prima: il web server risponderà con un file JSON che, anziché far ricaricare interamente la
pagina, riprenderà il caricamento fatto precedentemente, in seguito alla prima richiesta (Figura 3.2)
Abbiamo, quindi, una specie di caching fatto automaticamente grazie al codice con cui la pagina
web è stata creata; tutto ciò grazie ad AngularJS.
Figura 3.2 - Richiesta del browser, risposta del web server (con AngularJS)
Cristiano Antonio Capanna 333.1.1 SEO e AngularJS
Con l’acronimo SEO (Search Engine Optimization) si intendono tutte quelle attività finalizzate ad
ottenere la migliore analisi e lettura delle pagine web, da parte dei motori di ricerca, attraverso i loro
spider (cioè i software che analizzano i contenuti di una rete), grazie ad un migliore posizionamento
(cioè ad una visibilità della pagina ottimizzata).
I motori di ricerca, come Google e Bing, sono
progettati per la scansione di pagine web client-side.
La ricerca è, tipicamente, progettata per essere
veloce ed efficiente; infatti molte pagine che sono
scritte tramite un linguaggio pesante come
JavaScript (quindi troppo ricco di questi codici
dinamici), non sono prese in considerazione. Questo
perché le applicazioni, quando sono scritte in tal
modo, hanno bisogno di un motore JavaScript
dedicato per funzionare, per esempio PhantomJS o
V8. La scansione web, tipicamente, carica
principalmente pagine che non hanno bisogno di traduttori JavaScript. In più, un linguaggio così
pesante rende la scansione estremamente lenta ed inefficiente.
Ci sono molti modi per dire a Google (o agli altri motori di ricerca) di tenere in considerazione la
nostra pagina. Il primo, più utilizzato, è quello di usare un server lato back-end per l’applicazione.
Questo metodo ha il vantaggio di essere semplice nell’implementazione e di non far duplicare il codice
più volte.
Il secondo metodo consiste nel mettere tutti i
contenuti di Angular all’interno del tag
; questo renderà il codice molto
leggero, anche se il suo approccio dipende molto
dall’applicazione. Se tenessimo in considerazione la
nostra pagina dal lato server, questo tipo di tag
avrebbe un ottimo effetto.
Google e gli altri motori di ricerca supportano il
formato URL per l’identificazione della pagina. Essi
trasformano l’URL generico della pagina in un
formato personalizzato che la rende accessibile al
server e, quindi, ricevendo il file HTML (dell’intera pagina), la traducono per l’utente.
Se l’applicazione è stata creata tramite AngularJS, il server dirà al motore di ricerca di gestire il
nostro sito in modo leggermente diverso (privilegiato) rispetto gli altri. Ovviamente, questo accade se
abbiamo utilizzato una sintassi particolare, la quale ci permette di nascondere la struttura
estremamente dinamica di un’applicazione, che verrà vista, quindi, come una pagina HTML statica e,
quindi, schedulata più velocemente.
34 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Mettendo nell’header il tag
Il motore di ricerca, invece di trattare la nostra pagina come normale, la scansionerà immettendo
automaticamente nell’URL l’elemento:
?_escaped_fragment_=
Assumendo di utilizzare il linguaggio HTML5 con il servizio $location (cosa vera per AngularJS),
attraverso il codice seguente:
Angular.module(‘myApp’,[])
.configure([‘$routeProvider’, function($routeProvider) {
$routeProvider.html5Mode(true);
}]);
si farà sì che tutti i motori di ricerca vedranno la nostra applicazione Angular come una pagina
HTML statica, e, quindi, molto più facile da scansionare.
Altri metodi per rendere la nostra pagina SEO-friendly sono:
utilizzare Node/Express come middleware (cioè come intermediari tra server e client);
utilizzare Apache per riscrivere gli URL;
utilizzare Nginx per processare l’URL.
3.2 Dispositivi mobili
Le applicazioni mobili non sono la prossima frontiera dello sviluppo software, bensì lo scenario che
stiamo vivendo già ora. Ci sono già 1,2 miliardi di utenti che utilizzano le applicazioni mobile, ed il
numero cresce rapidamente. Presto i dispositivi mobili saranno più del numero delle persone che
vivono sul pianeta.
AngularJS è davvero un ottimo supporto per lo sviluppo “mobile”. Ci sono due vie da percorrere se
si vuole adattare AngularJS a tale contesto:
Cristiano Antonio Capanna 35 responsive web app;
applicazioni native con Cordova.
3.2.1 Responsive web app
Il modo più facile ovvero utilizzare AngularJS come supporto per lo sviluppo mobile consiste nell’
utilizzare tool che già conosciamo, HTML e CSS, per creare applicazioni pronte all’uso. Da quando le
app Angular utilizzano il linguaggio HTML, creare un’applicazione si riduce a costruire l’architettura
che dovrà supportare differenti dispositivi, in quanto avremo già all’interno interazioni responsive.
Per il desktop, la possibilità di creare interazioni è già a nostra disposizione attraverso ngClick
e la sua famiglia di Directive.
Per quanto riguarda il mobile la possibilità di creare interazioni viene data da un nuovo Module
chiamato ngTouch. Se questo Module non è caricato all’interno della libreria di Angular, dovremo
installarlo noi.
Possiamo installare ngTouch in più modi; la via più veloce consiste nello scaricare il codice
sorgente da http://angularjs.org. Gli extra si trovano nella sezione del download. Dopo aver fatto ciò,
è possibile salvare i file ngTouch in una locazione accessibile dall’applicazione.
Alternativamente, è possibile utilizzare Bower che, dal prompt dei comandi, ci permetterà di
scaricarlo e installarlo, utilizzando il comando bower install angular-touch --save.
In ultimo è possibile riferirci alla libreria importandola nel file index.html come uno script:
Qualunque sia la modalità con cui importiamo ngTouch all’interno della nostra applicazione
abbiamo bisogno di includere le dipendenze all’interno della stessa; ciò può essere effettuato con il
seguente codice:
I “mobile browser” lavorano differentemente rispetto alle versioni desktop. Questi riconosco sia il
tap che il doppio tap nello schermo.
Angular.module(‘myApp’, [‘ngTouch’]);
Il ritardo può rendere l’applicazione estremamente lenta, soprattutto se continuiamo ad utilizzare
l’evento click. Ci affideremo invece all’evento touch.
Il Module ngTouch gestisce perfettamente questa funzionalità sfruttando, al contempo, le
Directive del Module ngClick e chiamando il corretto evento a seconda della sequenza di tap
effettuati.
36 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
3.2.2 Applicazioni native con Cordova
Cordova è un framework open source, gratuito, che ci aiuta a costruire applicazioni “mobile”
usando standard API invece di codice nativo. Cordova ci consente di scrivere applicazioni utilizzando
HTML, JavaScript e AngularJS, invece di C++ oppure Java.
Cordova abilita l’accesso al dispositivo delle API JavaScript; queste permettono l’esecuzione, da
parte del dispositivo stesso, di operazioni specifiche come, ad esempio, ottenere
la posizione utilizzando la fotocamera.
La tipologia di applicazioni che verranno create con Cordova sono dette app
ibride, cioè applicazioni che rappresentano una via di mezzo tra le app native
(scritte e compilate per una specifica piattaforma utilizzando uno dei linguaggi di
programmazione supportati dal particolare sistema operativo) e le web app
(pagine Web ottimizzate per dispositivi mobili che sfruttano le tecnologie Web, in
particolare HTML5, JavaScript e CSS3 ma che, per funzionare, hanno sempre
bisogno di una connessione Internet).
Un modo semplice per associare le potenzialità di Cordova con le capacità di
Angular è quello di utilizzare il Module ngCordova. Questo è stato costruito per
rendere lo sviluppo delle applicazioni il più veloce ed efficiente possibile. Esso renderà disponibili
involucri di AngularJS per Cordova e tutti i suoi plugin. Attraverso questi potremo scattare una foto,
scansionare un codice a barre, caricare un file, accedere al flash del dispositivo, ottenere la posizione
attuale, e molto altro ancora con poche
linee di codice.
Anche in questo caso (come lo è
stato per ngTouch), per ottenere
ngCordova dobbiamo affidarci a
Bower, scrivendo, nel prompt dei
comandi:
bower install ngCordova
Richiameremo, nel nostro codice, il Module con l’aiuto dei due script:
Cristiano Antonio Capanna 37In ultimo, includeremo ngCordova come una dipendenza attraverso il seguente codice da
inserire nel Controller:
Creare applicazioni con l’utilizzo di Cordova è, di per sé, un vantaggio enorme, sia sotto l’aspetto
della riutilizzabilità del codice che sotto l’aspetto della semplicità del linguaggio; tutto ciò senza l’aiuto
Angular.module(‘myApp’, [‘ngCordova’])
di AngularJS.
Affiancando i vantaggi di AngularJS (già visti sia nelle applicazioni desktop che nelle responsive web
app) allo sviluppo mobile tramite Cordova, il possibile guadagno, a livello di semplicità, cresce
esponenzialmente.
38 Cristiano Antonio CapannaAngularJS: un framework di frontiera per la realizzazione di siti Web
Capitolo 4
Analisi dei concorrenti
Oltre ad AngularJS ci sono altri framework che possono essere considerati ottimi nella creazione di single
page web application; ciò li rende diretti concorrenti del tool oggetto della presente tesi. In questo capitolo
ne descriveremo alcuni soffermandoci sui vantaggi e gli svantaggi di ciascuno di essi.
Cristiano Antonio Capanna 39Puoi anche leggere
