• No results found

Stephen Radford

N/A
N/A
Protected

Academic year: 2022

Share "Stephen Radford"

Copied!
259
0
0

Loading.... (view fulltext now)

Full text

(1)
(2)

S

VILUPPARE

APPLICAZIONI

WEB

CON

A

NGULAR

JS

E

B

OOTSTRAP

Stephen Radford

(3)

© Apogeo - IF - Idee editoriali Feltrinelli s.r.l.

Socio Unico Giangiacomo Feltrinelli Editore s.r.l.

ISBN edizione cartacea: 9788850333424

Copyright © Packt Publishing 2014. First published in the English language under the title Learning Web Development with Bootstrap and AngularJS (9781783287550).

Il presente file può essere usato esclusivamente per finalità di carattere personale. Tutti i contenuti sono protetti dalla Legge sul diritto d’autore.

Nomi e marchi citati nel testo sono generalmente depositati o registrati dalle rispettive case produttrici.

L’edizione cartacea è in vendita nelle migliori librerie.

~

Sito web: www.apogeonline.com

Scopri le novità di Apogeo su Facebook Seguici su Twitter @apogeonline

Rimani aggiornato iscrivendoti alla nostra newsletter

(4)

Introduzione

(5)

Durante la mia carriera ho sviluppato progetti di diverse dimensioni, da piccoli siti commerciali a interi social network. Erano tutti accomunati dalla necessità di

disporre di JavaScript e CSS ben strutturati.

Questo libro affronta due fantastici progetti open source che derivano da questa esigenza: Bootstrap e AngularJS.

(6)

Gli argomenti del libro

Il Capitolo 1, “Hello, {{name}}”, esamina i fondamenti di AngularJS e Bootstrap attraverso la realizzazione di una semplice app Hello, World.

Il Capitolo 2, “Sviluppare con AngularJS e Bootstrap”, presenta l’app principale che svilupperemo nel corso del libro, il sistema delle griglie di Bootstrap e alcuni componenti di AngularJS.

Il Capitolo 3, “I filtri”, illustra alcuni dei filtri integrati in AngularJS e la creazione di un filtro.

Il Capitolo 4, “Routing”, si basa sul router integrato di AngularJS, e illustra l’utilizzo dei partial per creare un’app multiview.

Il Capitolo 5, “Le viste”, esamina il sistema delle griglie di Bootstrap e approfondisce i partial.

Il Capitolo 6, “CRUD”, spiega come, dopo aver impostato le viste, possiamo implementare, creare, leggere, aggiornare e cancellare le funzioni.

Il Capitolo 7, “AngularStrap”, descrive il modulo di terze parti che consente di utilizzare i plug-in di Bootstrap tramite AngularJS.

Il Capitolo 8, “Connessione al server”, esamina due sistemi ufficiali per collegarsi a un server.

Il Capitolo 9, “I task runner”, spiega come minificare tutti i file JS e Less utilizzando Grunt e gulp.

Il Capitolo 10, “Personalizzare Bootstrap”, mostra come personalizzare facilmente Bootstrap dopo aver impostato Grunt.js.

Il Capitolo 11, “Validazione”, affronta gli strumenti di validazione subito pronti all’uso; li implementeremo e gestiremo gli errori del server.

Il Capitolo 12, “Strumenti della community”, presenta alcuni strumenti creati dalla community di AngularJS.

L’Appendice A, “Persone e progetti”, presenta alcune persone importanti nell’ambiente di AngularJS e Bootstrap, oltre a progetti rilevanti.

L’Appendice B, “In caso di dubbio”, offre risposte agli eventuali dubbi dei lettori.

L’Appendice C, “Risposte ai quiz”, comprende tutte le risposte alle domande dei quiz presenti nel libro.

(7)

Che cosa occorre per il libro

AngularJS e Bootstrap non hanno dipendenze e per questo libro dovrete solo disporre di un browser e di un editor di testo. Vi consiglio Chrome e Atom.

(8)

A chi si rivolge il libro

Se vi interessa lo sviluppo web moderno, sicuramente conoscerete Bootstrap e AngularJS. Questo libro si rivolge a lettori con un minimo di esperienza in JavaScript che desiderano impegnarsi nello sviluppo di web app.

Tuttavia è assolutamente necessaria la conoscenza di JavaScript. Se non conoscete la differenza tra una stringa e un oggetto, correte ai ripari. Ovviamente, se avete già utilizzato AngularJS o Bootstrap e volete saperne di più, vi sentirete a vostro agio.

(9)

Convenzioni

In questo libro troverete alcuni stili di carattere che differenziano diversi tipi di informazioni. Di seguito alcuni esempi e una spiegazione del loro significato.

Il codice che troverete nel testo, i nomi delle tabelle del database, i nomi e le estensioni dei file, i percorsi, gli URL, l’input degli utenti e gli handle di Twitter vengono presentati in monospaziato.

Un frammento di codice è formattato nel seguente modo:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

</body>

</html>

Gli input e output da riga di comando si presentano nel modo seguente:

open -a 'Google Chrome' --args -allow-file-access-from-files

Termini nuovi, parole importanti, cartelle o directory ed elementi dell’interfaccia sono riportati in corsivo.

NOTA

I suggerimenti, gli avvertimenti e le note importanti appaiono in questo modo.

(10)

Scarica i file degli esempi

Sul sito dell’editore originale inglese, Packt Publishing, potete scaricare i file degli esempi presentati del testo. Per farlo è necessario registrarsi gratuitamente

all’indirizzo https://www.packtpub.com/register. Quindi andate sulla scheda del libro all’indirizzo https://www.packtpub.com/web-development/learning-web-development-bootstrap-and- angularjs (per comodità in forma abbraviata http://bit.ly/packt-ab) e fate clic su Code Files. Per problemi di download potete contattare la nostra redazione all’indirizzo

libri@apogeonline.com.

(11)

L’autore

(12)

Stephen Radford è uno sviluppatore web a tutto tondo nativo di Bristol, che vive nel centro di Leicester, in Gran Bretagna. Dopo aver frequentato all’università il corso di Grafica e Comunicazione Visiva, si è trasferito in questa città, dove è stato assunto da una delle più importanti società di marketing online del paese.

Mentre lavorava per alcune agenzie, Stephen ha sviluppato diversi progetti collaterali, tra cui FTPloy, un SaaS concepito per rendere accessibile a tutti il deployment continuo. Questo progetto si è classificato tra i finalisti nella categoria

“Side Project of the Year” dei .Net Awards.

Attualmente, insieme con il suo socio, gestisce Cocoon, una società di sviluppo web che realizza e gestisce app come FTPloy e Former. Cocoon lavora anche a stretto contatto con un gruppo di startup e aziende che trasformano idee in siti e app.

Vorrei ringraziare quanti mi hanno sostenuto durante la stesura di questo libro. Prima di tutto, il mio partner, Declan. Mi è stato di grande supporto e non potrei desiderare di avere accanto nessuna persona migliore di lui. Paul Mckay è stato il primo al quale ho mostrato il libro e mi ha anche aiutato con il mio profilo biografico perché, stranamente, ho incontrato grandi difficoltà a scrivere sulla mia vita.

Ovviamente, voglio ringraziare i miei genitori. Mio padre ha atteso pazientemente la copia cartacea del libro; spero che ora sia in bella mostra in soggiorno.

(13)

I revisori

(14)

Tasos Bekos, ingegnere informatico, utilizza le tecnologie web da più di dieci anni. Ha lavorato come sviluppatore freelance e consulente per alcune delle più importanti società internazionali finanziarie e di telecomunicazioni. Attualmente lavora come sviluppatore per ZuluTrade, dove si avvale delle più moderne tecnologie front-end. Conosce a fondo AngularJS ed è un membro attivo della community open source, nella quale opera come principale collaboratore al progetto AngularUI

Bootstrap. Quando non scrive codice, trascorre il tempo a giocare con i suoi due figli.

Jack Hsu è uno sviluppatore web specializzato negli strumenti e nelle tecnologie front-end. È il principale sviluppatore front-end presso Nulogy, dove mette la sua conoscenza di JavaScript e AngularJS al servizio dei colleghi. Prima di Nulogy, ha lavorato per numerose aziende, tra cui The Globe & Mail, Ontario Institute of Cancer Research e Wave Accounting. Nel tempo libero gioca ai videogiochi, esplora i diversi quartieri di Toronto o viaggia per il mondo. Sul suo blog personale è possibile

leggere numerosi post riguardanti la programmazione.

Ole B. Michelsen lavora da più di 12 anni nello sviluppo web e si è laureato in informatica presso la DIKU, all’università di Copenhagen. Di recente si è

specializzato nello sviluppo JavaScript front-end, concentrandosi in particolare su WebRTC e su framework per app single page.

Jurgen Van de Moere è nato nel 1978 ed è cresciuto a Evergem, in Belgio, con i genitori, la sorella e i suoi animali domestici. A 6 anni ha iniziato ad aiutare il padre, proprietario di un negozio di informatica, ad assemblare i computer per i clienti.

Mentre gli amici giocavano ai videogiochi, Jurgen preferiva scrivere script e programmi per risolvere i problemi che erano costretti ad affrontare i clienti del padre. Dopo essersi laureato in latino e matematica presso il college Sint-Lievens a Gand, Jurgen ha proseguito la sua formazione presso l’università della stessa città, dove ha frequentato informatica. All’università il suo nome utente Unix era

“jvandemo,” il nickname che usa ancora oggi su Internet. Nel 1999 ha iniziato la carriera professionale presso Infoworld. Dopo anni di duro lavoro come sviluppatore e network engineer, nel 2005 e nel 2006 ha ricoperto posizioni manageriali.

Sentendosi uno sviluppatore, e avvertendo la mancanza di scrivere codice, nel 2007 ha deciso di porre fine alla carriera di manager per dedicarsi di nuovo alla sua vera passione: lo sviluppo. Da allora ha studiato e lavorato da casa, in Belgio, dove vive

(15)

attualmente con la sua fidanzata, suo figlio e i suoi cani. In un mondo in rapida evoluzione di applicazioni data-intensive e real-time, si concentra sulle tecnologie legate a JavaScript e basate su AngularJS e Node.js. I suoi numerosi contributi

pubblici e privati hanno permesso di avviare molteplici progetti di successo in tutto il mondo. Se vi serve una consulenza per il vostro progetto, potete scrivergli

all’indirizzo hire@jvandemo.com. Potete anche seguirlo su Twitter (@jvandemo) o leggere il suo blog (http://www.jvandemo.com).

(16)

Capitolo 1

(17)

Hello, {{name}}

Il modo migliore per imparare a programmare è scrivere codice, ed è proprio questo ciò che faremo. Per comprendere quanto è facile essere subito operativi con Bootstrap e AngularJS, realizzeremo un’applicazione molto semplice che ci

consentirà di digitare un nome e visualizzarlo sulla pagina in tempo reale. Scoprirete così l’efficacia del binding dei dati bidirezionale e il linguaggio per template

integrato di Angular. Utilizzeremo Bootstrap per attribuire uno stile e una struttura all’app.

Prima di installare i framework, creeremo la struttura delle cartelle e il file

index.html che sarà la base dell’app.

(18)

Impostazione

Per realizzare l’app con Angular e Bootstrap, procediamo all’impostazione, che consiste nel creare una pagina HTML e includere alcuni file. Innanzitutto create una nuova directory, chapter1, e apritela nel vostro editor. Create al suo interno un nuovo file, index.html, e immettete questo codice boilerplate:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8”>

<title></title>

</head>

<body>

</body>

</html>

Si tratta di una pagina HTML standard con la quale opereremo dopo aver integrato Angular e Bootstrap.

Create due cartelle all’interno della cartella chapter1: css e js. La struttura completa delle cartelle dovrebbe essere simile alla seguente.

(19)

Installazione di AngularJS e Bootstrap

Installare questi framework è semplice come includere file CSS o JavaScript nella pagina. Lo potremmo fare con un content delivery network (CDN) come Google Code o MaxCDN, ma per ora recupereremo i file manualmente. Esaminiamo i passi che dovreste conoscere quando integrerete AngularJS e Bootstrap nel progetto.

Installazione di Bootstrap

Andate all’indirizzo http://getbootstrap.com e fate clic sul pulsante Download Bootstrap. Otterrete un file ZIP con l’ultima versione di Bootstrap che comprende CSS, font e file JavaScript. Le versioni precedenti includevano una directory delle immagini, che nella Versione 3 diventa icon fonts.

Per quest’app, ci interessa per ora soltanto un file: bootstrap.min.css presente nella directory css. Il foglio di stile fornisce tutta la struttura e quegli elementi graziosi, tra cui pulsanti e messaggi di avviso, per cui Bootstrap è conosciuto. Copiatelo nella directory css del progetto e aprite il file index.html nell’editor di testo.

Integrare Bootstrap è facile come collegare il file CSS che abbiamo appena copiato. Aggiungete quanto segue all’interno del tag <head>. Inserite questo tag nell’elemento <head> della pagina:

<link rel=”stylesheet” href=”css/bootstrap.min.css”>

Installazione di AngularJS

Dopo aver integrato Bootstrap nella web app, procedete a installare Angular.

Visitate il sito https://angularjs.org/ e fate clic sul pulsante Download. Vedrete alcune opzioni; a voi serve la versione stabile minificata.

Copiate il file che avete scaricato nella directory js del progetto e aprite il file

index.html. Angular può essere integrato nell’app come qualsiasi altro file JavaScript.

È preferibile includerlo nel tag <head> della pagina, altrimenti alcune funzioni a cui ricorrerete nel libro non saranno attive. Anche se non è necessario, dovrete compiere altri passi per integrare ancora di più Angular nel file HTML.

Inserite questo tag <script> nell’ <head> della pagina.

<script src=”js/angular.min.js”></script>

(20)

Tutto fatto? Quasi. Dobbiamo dire ad Angular che intendiamo utilizzarlo nell’app.

Angular richiede questo bootstrap, e il framework semplifica moltissimo questa procedura. Dovete semplicemente includere un altro attributo nel tag <html> di apertura:

<html lang=”en” ng-app>

Ecco fatto! Ora Angular sa che vogliamo utilizzarlo.

NOTA

Angular ci consente anche di far precedere questi attributi da data- (per esempio data-ng-app) nel caso volessimo scrivere HTML5 valido.

Utilizzare AngularJS

Abbiamo visto molta teoria alla base di Angular; è giunto il momento di metterla in pratica. Dopo aver creato un’app funzionante, vedremo come abbellirla con Bootstrap.

Riaprite il file index.html, ma questa volta apritelo anche nel browser così da vedere ciò su cui state lavorando. Ecco a che punto siamo arrivati:

<html lang=”en” ng-app>

<head>

<meta charset=”utf-8”>

<link rel=”stylesheet” href=”css/bootstrap.min.css”>

<title></title>

<script type=”text/javascript” src=”js/angular.min.js”></script>

</head>

<body>

</body>

</html>

Abbiamo impostato Bootstrap e Angular e abbiamo inizializzato l’app con l’attributo ng-app nel tag di apertura <html>; ora passiamo rapidamente all’azione.

Realizzeremo un’app Hello, World un po’ diversa. Invece di far comparire questa scritta, avremo un campo di testo che effettuerà il binding dei dati e li ripeterà

automaticamente nella vista; tutto questo senza scrivere una sola riga di JavaScript.

Iniziamo ad aggiungere il tag <h1> nel tag <body>:

<h1>Hello, World</h1>

Nel browser vedrete che Bootstrap ha aggiornato la visualizzazione predefinita. Al posto del font Times New Roman compare l’Helvetica e i margini di troppo attorno al bordo sono stati eliminati.

(21)

Ora dobbiamo includere l’input di testo e specificare anche il modello che

intendiamo utilizzare. Il modello può essere di qualsiasi tipo, ma in questo caso sarà una stringa che l’input restituirà:

<input type=”text” ng-model=”name”>

L’attributo ng-model dichiara il binding del modello su questo elemento, e tutto ciò che digiteremo nel campo di testo sarà associato a esso da Angular. Ovviamente non verrà visualizzato come per magia sulla pagina; dovremo dire al framework dove ripeterlo. Per visualizzare il modello sulla pagina, è sufficiente racchiudere il nome tra doppie parentesi graffe:

{{name}}

Inseritelo al posto di World nel tag <h1> e aggiornate la pagina nel browser. Se digitate il vostro nome nel campo di testo, vedrete che viene visualizzato

automaticamente nell’header in tempo reale. Angular lo fa al posto vostro senza dover scrivere una sola riga di JavaScript.

(22)

Un risultato ottimo, ma sarebbe opportuno avere un’impostazione predefinita che eviti di far sembrare che non funziona ancora prima che un utente digiti il suo nome.

Fortunatamente tutto ciò che è compreso tra le parentesi graffe viene analizzato come un’espressione AngularJS, e così è possibile verificare se il modello ha un valore; in caso contrario, può ripetere World. In Angular questa è un’espressione, ed è sufficiente aggiungere il doppio pipe come in JS:

{{name || ‘World’}}

NOTA

Angular descrive in questo modo un’espressione: “Frammenti di codice simili a JavaScript che di solito sono posti in binding come {{ espressione }}.”

È opportuno ricordare che si tratta di JavaScript, ed ecco perché dobbiamo inserire le virgolette per segnalare che si tratta di una stringa e non del nome di un modello.

Se provaste a cancellarle, vedreste che Angular non visualizza di nuovo nulla. Ciò accade perché i modelli name e World non sono definiti.

Questi modelli possono essere definiti direttamente all’interno dell’HTML

utilizzando, come abbiamo visto, un attributo, ma è anche possibile assegnare a essi un valore da un controller. A questo scopo create un nuovo file JS, controller.js, e includetelo nell’app:

<script type=”text/javascript” src=”js/controller.js”></script>

Inseritelo dopo aver incluso Angular nella pagina per evitare errori.

I controller sono semplicemente funzioni che Angular può utilizzare;

esaminiamone uno:

(23)

function AppCtrl($scope){

}

Qui abbiamo dichiarato il controller (in sostanza una semplice funzione del costruttore JavaScript) e in esso abbiamo inserito lo scope. Lo scope è ciò a cui possiamo accedere all’interno della vista. Su un’unica pagina possono esistere

molteplici controller e molteplici scope. Si tratta in sostanza di un oggetto JavaScript dei nostri modelli e delle nostre funzioni, sui quali Angular opera la sua magia; per esempio, lo scope della nostra applicazione per il momento appare così:

{

name: “Stephen”

}

Lo scope cambia a seconda di ciò che si digita nel campo di testo. A esso si può accedere sia dalla vista sia dal controller.

Dopo aver creato il controller, dobbiamo dire ad Angular che intendiamo utilizzarlo. Per la nostra app ci serve un solo controller; aggiungiamo un secondo attributo al tag <html>:

ng-controller=”AppCtrl”

Questo attributo dice ad Angular che vogliamo utilizzare la funzione AppCtrl che abbiamo appena creato come controller per la pagina. Potremmo ovviamente aggiungerlo a qualsiasi elemento sulla pagina compreso, se volessimo, il body.

Per verificare che tutto funzioni, specificheremo un valore iniziale per il modello.

È facile come impostare una proprietà su qualsiasi oggetto:

function AppCtrl($scope) { $scope.name = “World”;

}

Se aggiornate l’app nel browser, vedrete che World è precompilato come valore del modello. Questo è un ottimo esempio dell’efficace binding dei dati bidirezionale di Angular. Ci consente di utilizzare dati predefiniti di una API o di un database e poi modificarli direttamente nella vista prima di riottenerli nel controller.

NOTA

Angular descrive il binding dei dati come “la sincronizzazione dei dati tra i componenti del modello e della vista”. Così, se modifichiamo il valore di un modello nella vista o nel controller JavaScript, tutto si aggiorna di conseguenza.

Bootstrap

Dopo aver creato l’applicazione Hello World e aver verificato che tutto funzioni come previsto, è il momento di utilizzare Bootstrap per aggiungere stile e struttura

(24)

alla nostra app. Per ora l’app è mal allineata sulla sinistra e tutto sembra troppo fitto;

rimediamo con un po’ di scaffolding. Bootstrap offre un ottimo sistema di griglie responsive mobile first che possiamo utilizzare aggiungendo alcuni div e alcune classi.

Prima, però, racchiudiamo il contenuto in un contenitore per far subito un po’ di ordine.

NOTA

Il concetto di mobile first consiste nel progettare/sviluppare innanzitutto per gli schermi più piccoli e aggiungere elementi al design invece di eliminarli.

<div class=”container”>

<h1>Hello, {{name || ‘World’}}</h1>

<input type=”text” ng-model=”name”>

</div>

Se ridimensionate la finestra del browser, dovreste iniziare a osservare la capacità di adattamento del framework e vedere la finestra comprimersi.

Può essere una buona idea racchiuderlo in quello che nella terminologia di Bootstrap è un Jumbotron (nelle versioni precedenti si chiamava Hero Unit). Farà risaltare molto di più il titolo. Possiamo ottenere questo risultato racchiudendo i tag

<h1> e <input> in un nuovo div associato alla classe jumbotron:

<div class=”container”>

<div class=”jumbotron”>

<h1>Hello, {{name || ‘World’}}</h1>

<input type=”text” ng-model=”name”>

</div>

</div>

(25)

Ha un aspetto decisamente migliore, ma il contenuto è ancora troppo vicino alla parte superiore della finestra del browser. Possiamo introdurre un ulteriore

miglioramento con un header di pagina, anche se il campo di testo mi sembra ancora fuori posto. Sistemiamo innanzitutto l’header di pagina:

<div class=”container”>

<div class=”page-header”>

<h2>Chapter 1 <small>Hello, World</small></h2>

</div>

<div class=”jumbotron”>

<h1>Hello, {{name || ‘World’}}</h1>

<input type=”text” ng-model=”name”>

</div>

</div>

(26)

Ho inserito il numero e il titolo del capitolo. Il tag <small> all’interno del tag <h2>

permette di distinguere efficacemente il numero dal titolo del capitolo.

La classe page-header aggiunge altro margine e padding, oltre a un sottile bordo inferiore. L’ultimo elemento che potremmo migliorare è la casella di testo. Bootstrap offre alcuni ottimi stili di testo e vale la pena utilizzarli. Per prima cosa dobbiamo aggiungere la classe form-control all’input di testo.

In questo modo la larghezza verrà impostata al 100% e alcuni aspetti stilistici miglioreranno, come i bordi arrotondati e un bagliore nel momento in cui l’elemento ottiene il focus:

<input type=”text” ng-model=”name” class=”form-control”>

Va molto meglio, ma sembra ancora un po’ piccolo rispetto all’header. Bootstrap offre altre due classi che rimpiccioliscono o ingrandiscono l’elemento,

rispettivamente input-lg e input-sm. In questo caso, scegliamo la classe input-lg e la aggiungiamo all’input:

<input type=”text” ng-model=”name” class=”form-control input-lg”>

(27)

Dobbiamo ancora risolvere la questione della spaziatura perché è troppo a ridosso del tag <h1>. Forse è una buona idea aggiungere un’etichetta, così l’utente capirà che deve digitare nella casella. Bootstrap ci consente di prendere due piccioni con una fava perché include un margine nell’etichetta:

<label for=”name”>Enter Your Name</label>

<input type=”text” ng-model=”name” class=”form-control input-lg” id=”name”>

(28)

Quiz

1. Come viene inizializzato Angular sulla pagina?

2. Che cosa si usa per visualizzare sulla pagina un valore del modello?

3. A che cosa corrisponde l’acronimo MVC?

4. Come creiamo un controller e come diciamo ad Angular che intendiamo utilizzarlo?

5. In Bootstrap 3 qual è il nuovo nome di Hero Unit?

(29)

Riepilogo

La nostra app è bella e funziona proprio come dovrebbe; riepiloghiamo ciò che abbiamo imparato in questo primo capitolo.

Innanzitutto abbiamo visto come è facile installare AngularJS e Bootstrap includendo un solo file JavaScript e un unico foglio di stile. Abbiamo anche osservato come viene inizializzata un’applicazione Angular e abbiamo iniziato a realizzare la nostra prima app.

L’app Hello, World che abbiamo creato, seppur molto semplice, illustra alcune caratteristiche fondamentali di Angular:

espressioni;

scope;

modelli;

binding dei dati bidirezionale.

Tutto questo è stato possibile senza scrivere una sola riga di JavaScript; infatti il controller che abbiamo creato serviva solo a illustrare il binding bidirezionale e non era un componente obbligatorio dell’app.

Con Bootstrap, abbiamo utilizzato alcuni dei numerosi componenti disponibili, tra cui le classi jumbotron e page-header per attribuire all’app un po’ di stile e sostanza.

Inoltre abbiamo visto in azione il nuovo design responsive mobile first senza dover affollare il markup con classi o elementi non necessari.

Nel Capitolo 2 esamineremo più nel dettaglio alcune caratteristiche fondamentali di AngularJS e Bootstrap e presenteremo il progetto che implementeremo nel corso del libro.

(30)

Capitolo 2

(31)

Sviluppare con AngularJS e Bootstrap

Dopo aver creato ufficialmente la prima app utilizzando AngularJS e Bootstrap, è giunto il momento di fare un salto di qualità.

In questo libro vi servirete di entrambi i framework per sviluppare un’app di

gestione dei contatti con tanto di ricerca testuale, creazione, modifica e cancellazione.

Esamineremo una base di codice che può essere mantenuta e sfrutteremo tutto il potenziale di entrambi i framework. Iniziamo a sviluppare!

(32)

Impostazione

Creiamo rapidamente una nuova directory per l’app e impostiamo una struttura simile all’app Hello, World che abbiamo sviluppato nel Capitolo 1.

Per esempio, nella struttura di cartelle mostrata nella prossima figura, abbiamo inserito le directory nella directory assets per tenere tutto in ordine. Copiate Angular e Bootstrap, come descritto nel Capitolo 1 all’interno delle directory pertinenti e create il file index.html nella radice, che diventerà la base dell’app di gestione dei contatti. Il seguente snippet è una semplice pagina HTML con integrati Bootstrap e Angular. Abbiamo anche inizializzato Angular sulla pagina con l’attributo ng-app nel tag <html>.

Ecco come dovrebbe apparire in questa fase:

<!DOCTYPE html>

<html lang=”en” ng-app>

<head>

<meta charset=”utf-8”>

<title>Contacts Manager</title>

<link rel=”stylesheet” href=”assets/css/bootstrap.min.css”>

<script type=”text/javascript”

src=”assets/js/angular.min.js”></script>

</head>

<body>

</body>

</html>

(33)

Scaffolding

Dopo aver impostato il file e la struttura delle cartelle di base, possiamo iniziare a effettuare lo scaffolding dell’app grazie a Bootstrap. Oltre a offrire una serie di componenti, come la navigazione e i pulsanti, che possiamo utilizzare nell’app di gestione dei contatti, Bootstrap propone anche un sistema di griglie responsive molto potente di cui sfrutteremo ogni potenzialità.

Barra di navigazione

Avremo bisogno di una barra di navigazione (navbar) per passare da una vista all’altra. Ovviamente sarà collocata in cima allo schermo.

Osserviamo la barra di navigazione completa prima di esaminarla più a fondo:

<nav class=”navbar navbar-default”role=”navigation”>

<div class=”navbar-header”>

<button type=”button” class=”navbar-toggle”

data-toggle=”collapse” data-target=”#nav-toggle”>

<span class=”icon-bar”></span>

<span class=”icon-bar”></span>

<span class=”icon-bar”></span>

</button>

<a class=”navbar-brand” href=”/”>Contacts Manager</a>

</div>

<div class=”collapse navbar-collapse” id=”nav-toggle”>

<ul class=”nav navbar-nav”>

<li class=”active”><a href=”/”>Browse</a></li>

<li><a href=”/add”>Add Contact</a></li>

</ul>

<form class=”navbar-form navbar-right” role=”search”>

<input type=”text” class=”form-control”

placeholder=”Search”>

</form>

</div>

</nav>

Questo codice potrebbe intimorirvi, considerato che è quello di un componente della pagina molto semplice, ma se l’analizzate nel dettaglio, noterete che ogni elemento è necessario.

Il tag <nav> contiene tutto ciò che è presente nella barra di navigazione. Al suo interno si trovano due sezioni: navbar-header e navbar-collapse. Questi elementi sono riservati alla navigazione mobile e controllano ciò che viene mostrato o nascosto dal pulsante interruttore.

L’attributo data-target per il pulsante corrisponde direttamente all’attributo id dell’elemento navbar-collapse; in questo modo Bootstrap sa che cosa deve attivare. La prossima schermata riproduce la barra di navigazione su dispositivi più grandi di un tablet.

(34)

Includeremo la barra di navigazione direttamente all’interno del tag <body>. In questo modo occuperemo tutta la larghezza della finestra del browser.

Se la ridimensionate, vedrete che Bootstrap visualizza l’header mobile con il pulsante interruttore per schermi di dimensioni inferiori ai 768 px, ossia le

dimensioni dello schermo di un iPad con orientamento verticale. Tuttavia se fate clic sul pulsante per muovervi nella navigazione, vedrete che non succede nulla. Ciò accade perché non abbiamo incluso in Bootstrap il file JavaScript, presente nel file ZIP che abbiamo scaricato in precedenza.

Copiatelo nella directory js dell’app e fatevi riferimento nel file index.html. Dovrete includere anche jQuery nell’applicazione, poiché il JS di Bootstrap dipende da

questo.

Potete trovare l’ultima versione all’indirizzo http://jquery.com/; ancora una volta aggiungetela alla directory e includetela nella pagina prima di bootstrap.js. Verificate che i file JavaScript compaiano nel seguente ordine:

<script src=”assets/js/jquery.min.js”></script>

<script src=”assets/js/bootstrap.min.js”></script>

<script src=”assets/js/angular.min.js”></script>

Se riaggiornate la pagina dovreste riuscire a far clic sul pulsante interruttore per visualizzare la navigazione per dispositivi mobili.

(35)

Le griglie di Bootstrap

Il sistema a griglia con 12 colonne di Bootstrap è molto potente e ci permette di effettuare lo scaffolding della nostra app responsive con pochissimi elementi, approfittando del CSS modulare. La griglia è composta da righe e colonne che è possibile adattare utilizzando una serie di classi. Prima di iniziare, dobbiamo inserire un contenitore per le righe, altrimenti il framework non si comporterà come previsto.

È sufficiente un semplice tag <div> da collocare sotto la barra di navigazione:

<div class=”container”></div>

In questo modo la griglia sarà centrata e aggiungeremo la proprietà max-width per disporre tutto per bene.

Esistono quattro prefissi per le classi, che definiscono il comportamento delle colonne. Utilizzeremo perlopiù il prefisso col-sm-, che comprime le colonne in modo che appaiano una sopra l’altra quando il contenitore ha una larghezza inferiore a 750 px.

Le altre classi si riferiscono tutte a diverse dimensioni dello schermo dei dispositivi e si comportano in modo simile. La seguente tabella, tratta da

http://getbootstrap.com/, mostra le differenze tra le quattro classi.

Cellulari (<768 px)

Tablet (≥768 px)

Desktop (≥992 px)

Desktop (≥1200 px) Comportamento della

griglia

Sempre orizzontale

All’inizio compressa, orizzontale sopra i breakpoint

Larghezza massima Nessuna

(36)

del contenitore (automatico) 750 px 970 px 1170 px

Prefisso delle classi .col-xs- .col-sm- .col-md- .col-lg-

Larghezza massima

della colonna Automatica 60 px 78 px 95 px

Offset N/D

Ordinamento delle

colonne N/D

Creiamo rapidamente un layout a due colonne con un’area del contenuto principale e una barra laterale. Siccome la griglia è costituita da 12 colonne, dovremo far sì che l’area del contenuto rientri in esse, altrimenti avremo dello spazio vuoto.

Otto colonne per l’area del contenuto e quattro per la barra laterale dovrebbero essere una soluzione ottimale, ma come implementarle?

All’interno del contenitore creiamo un nuovo tag <div> con la classe row. Possiamo impostare quante righe desideriamo; ciascuna può contenere al massimo dodici colonne:

<div class=”container”>

<div class=”row”>

</div>

</div>

Siccome vogliamo che le colonne vengano visualizzate su dispositivi mobili, utilizzeremo il prefisso col-sm-. La creazione di una colonna è semplice; è sufficiente scegliere il prefisso opportuno e aggiungere il numero delle colonne che si desidera impostare. Osservate il layout di base a due colonne:

<div class=”container”>

<div class=”row”>

<div class=”col-sm-8”>

This is our content area </div>

<div class=”col-sm-4”>

Here is our sidebar </div>

</div>

</div>

Se lo visualizzate su uno schermo di dimensioni superiori a quello di un

dispositivo mobile, Bootstrap aggiungerà automaticamente 30 px di spazio tra le colonne (15 px su ciascun lato). Tuttavia, talvolta vorrete inserire altro spazio tra le colonne e distanziarle un po’. Bootstrap permette di ottenere questo risultato

aggiungendo un’altra classe alla colonna.

Scegliete di nuovo il prefisso opportuno, ma questa volta aggiungete la parola chiave offset:

<div class=”col-sm-4 col-sm-offset-1”></div>

(37)

In questo caso il numero presente alla fine controlla il numero delle colonne su cui si imposta l’offset. La nuova classe aggiunge un ulteriore margine a sinistra.

NOTA

Ricordate: la somma delle colonne in una riga, compreso l’offset, non deve essere superiore a 12.

All’interno delle colonne è possibile nidificare altre righe e colonne per creare un layout più complesso:

<div class=”container”>

<div class=”row”>

<div class=”col-sm-8”>

<div class=”row”>

<div class=”col-sm-6”>

<p>Lorem ipsum dolor…<p>

</div>

<div class=”col-sm-6”>

<p>Class aptent taciti…</p>

</div>

</div>

</div>

</div>

</div>

Così si creeranno due colonne all’interno del contenitore principale che abbiamo impostato prima. A titolo di esempio, abbiamo inserito all’interno del testo fittizio.

Nel browser vedrete che ora sono presenti tre colonne. Tuttavia, siccome la griglia è nidificata, possiamo creare una nuova riga e una sola colonna, tre colonne o quello che richiede il layout.

Classi helper

Bootstrap include alcune classi helper che possiamo utilizzare per adattare il layout. In genere sono funzionali e rispondono a un unico scopo. Osserviamo alcuni esempi.

Elementi flottanti

Gli elementi flottanti sono spesso essenziali per creare un layout efficace sul Web, e Bootstrap offre due classi per rendere mobili gli elementi a sinistra o a destra:

<div class=”pull-left”>...</div>

<div class=”pull-right”>...</div>

Per utilizzare efficacemente gli elementi flottanti, dobbiamo racchiuderli in una classe clearfix. In questo modo li isoleremo, e il flusso del documento verrà

visualizzato come previsto:

<div class=”clearfix”>

<div class=”pull-left”>...</div>

<div class=”pull-right”>...</div>

</div>

(38)

Se le classi float si trovano direttamente all’interno di un elemento con la classe

row, gli elementi “mobili” vengono isolati automaticamente da Bootstrap e non è necessario applicare manualmente la classe clearfix.

Centrare gli elementi

Insieme con gli elementi flottanti, spesso è necessario centrare gli elementi a livello di blocco. Bootstrap permette di farlo con la classe center-block:

<div class=”center-block”>...</div>

In questo modo si impostano le proprietà del margine sinistro e destro su automatico, e l’elemento sarà centrato.

Mostrare o nascondere

Potreste voler mostrare o nascondere gli elementi con il CSS; Bootstrap offre due classi per ottenere questo risultato:

<div class=”show”>...</div>

<div class=”hidden”>...</div>

È importante osservare che la classe imposta la proprietà display su block; quindi applicatela soltanto agli elementi a livello di blocco e non a quelli inline o inline-block.

Bootstrap include inoltre numerose classi per permettere agli elementi di venire mostrati o nascosti su schermi di dimensioni specifiche. Le classi utilizzano le stesse dimensioni predefinite della griglia di Bootstrap.

Per esempio, il codice seguente nasconderà un elemento su uno schermo con dimensioni specifiche:

<div class=”hidden-md”></div>

Nasconderà l’elemento su dispositivi con schermi di dimensioni medie, ma lo lascerà ancora visibile su dispositivi mobili, tablet e grandi desktop. Per nascondere un elemento su più dispositivi, dovete utilizzare più classi:

<div class=”hidden-md hidden-lg”></div>

Le classi visible hanno un comportamento opposto e mostrano gli elementi su schermi di dimensioni specifiche. Tuttavia, a differenza delle classi hidden, bisogna impostare il valore display, che può essere block, inline o inline-block:

<div class=”visible-md-block”></div>

<div class=”visible-md-inline”></div>

<div class=”visible-md-inline-block”></div>

(39)

Ovviamente è possibile utilizzare le diverse classi in associazione. Se per esempio volete che compaia un elemento a livello di blocco su uno schermo piccolo, che in seguito deve diventare inline-block, dovrete utilizzare il codice seguente:

<div class=”visible-sm-block visible-md-inline-block”></div>

Se non ricordate le diverse dimensioni delle classi, consultate il paragrafo “Le griglie di Bootstrap”.

Utilizzare le direttive

Senza saperlo abbiamo già utilizzato ciò che Angular definisce direttive. Si tratta in sostanza di potenti funzioni che possono essere chiamate da un attributo o dal suo stesso elemento. Angular ne include molte. Sia che intendiamo eseguire il ciclo dei dati, gestire i clic o inviare i form, Angular velocizzerà tutte queste operazioni.

Abbiamo utilizzato una direttiva per inizializzare Angular sulla pagina tramite ng-

app, e tutte le direttive che esamineremo in questo capitolo vengono usate allo stesso modo: aggiungendo un attributo a un elemento.

Prima di osservare le altre direttive integrate, è necessario creare rapidamente un controller. Create un nuovo file e chiamatelo controller.js. Salvatelo nella directory js all’interno del progetto e apritelo nell’editor.

Come abbiamo visto nel Capitolo 1, i controller sono semplici funzioni standard del costruttore JS nelle quali è possibile inserire i servizi di Angular come $scope. Di queste funzioni viene creata un’istanza quando Angular rileva l’attributo ng-controller. In questo modo possiamo avere molteplici istanze dello stesso controller all’interno dell’applicazione e riutilizzare buona parte del codice. Questa dichiarazione di funzione è tutto ciò di cui abbiamo bisogno per il controller:

function AppCtrl(){

}

Per comunicare al framework che questo è il controller che intendiamo utilizzare, dobbiamo includerlo nella pagina dopo che Angular viene caricato, e aggiungere la direttiva ng-controller al tag di apertura <html>:

<html ng-controller=”AppCtl”>

<script type=”text/javascript”

src=”assets/js/controller.js”></script>

ng-click e ng-mouseover

(40)

Una delle operazioni fondamentali che è possibile eseguire con JavaScript consiste nel gestire un evento clic. A questo scopo si utilizza l’attributo onclick su un elemento ricorrendo a jQuery o a un listener di eventi. In Angular ricorreremo a una direttiva.

Come esempio, creeremo un pulsante che aprirà una finestra di avviso:

un’operazione semplice. Iniziamo ad aggiungere il pulsante all’area del contenuto creata in precedenza:

<div class=”col-sm-8”>

<button>Click Me</button>

</div>

Se lo visualizzate nel browser, vedrete un pulsante HTML standard: fin qui

nessuna sorpresa. Prima di associare la direttiva a questo elemento, dobbiamo creare un handler nel controller. Si tratta di una semplice funzione all’interno del controller associato allo scope. È molto importante associare la funzione allo scope, altrimenti sarà impossibile accedervi dalla vista:

function AppCtl($scope){

$scope.clickHandler = function(){

window.alert(‘Clicked!’);

};

}

Come sappiamo, possiamo avere molteplici scope su una pagina; questi sono oggetti ai quali in Angular possono accedere la vista e il controller. Per fare in modo che il controller vi abbia accesso, abbiamo inserito il servizio $scope nel controller.

Questo servizio mette a disposizione lo scope che Angular crea sull’elemento al quale abbiamo aggiunto l’attributo ng-controller.

Angular si basa molto sull’inserimento delle dipendenze, che forse potreste non conoscere. Come abbiamo visto, Angular è suddiviso in moduli e servizi. Ciascuno di questi moduli e servizi dipende l’uno dall’altro e l’inserimento delle dipendenze consente la trasparenza referenziale. Durante il test dell’unità, possiamo anche simulare degli oggetti che verranno inseriti per confermare i risultati dei test.

L’inserimento delle dipendenze ci permette di dire ad Angular da quali servizi dipende il controller, e il framework li convertirà per noi.

Potete trovare una spiegazione dettagliata sull’inserimento delle dipendenze di AngularJS nella documentazione ufficiale all’indirizzo

https://docs.angularjs.org/guide/di.

Ora l’handler è impostato; come abbiamo fatto in precedenza, dobbiamo aggiungere la direttiva al pulsante, come attributo aggiuntivo. Questa volta passeremo il nome della funzione che intendiamo eseguire, che in questo caso è

clickHandler. Angular valuterà tutto ciò che inseriremo nella direttiva come espressione

(41)

di AngularJS; pertanto dobbiamo fare attenzione ad aggiungere due parentesi che indicano che stiamo chiamando una funzione:

<button ng-click=”clickHandler()”>Click Me</button>

Se lo visualizzate nel browser, vedrete una finestra di avviso quando farete clic sul pulsante. Non è necessario includere la variabile $scope quando si chiama la funzione nella vista. Le funzioni e le variabili alle quali è possibile accedere dalla vista

rimangono all’interno dello scope corrente o di qualsiasi scope precedente.

Se desiderate visualizzare la finestra di avviso all’hover (cioè al passaggio) invece che al clic, è sufficiente modificare il nome della direttiva in ng-mouseover, poiché entrambe funzionano nello stesso modo.

ng-init

La direttiva ng-init valuta un’espressione sullo scope corrente e può essere utilizzata da sola o in associazione con altre direttive. La priorità di esecuzione è massima rispetto ad altre direttive, per fare in modo che l’espressione venga valutata in tempo.

Ecco un semplice esempio della direttiva ng-init in azione:

<div ng-init=”test = ‘Hello, World’”></div>

{{test}}

In questo modo comparirà sullo schermo Hello, World quando l’applicazione sarà caricata nel browser. Sopra abbiamo impostato il valore del modello di test e

utilizzato la sintassi con le doppie parentesi graffe per visualizzarlo.

(42)

ng-show e ng-hide

Talvolta dovremo controllare la visualizzazione programmata di un elemento. Sia

ng-show sia ng-hide possono essere controllate dal valore restituito da una funzione o da un modello.

Possiamo avvalerci della funzione clickHandler che abbiamo creato per mostrare in azione la direttiva ng-click al fine di rendere visibile o nascondere l’elemento. A questo scopo creeremo un nuovo modello e alterneremo il valore tra vero e falso.

Creiamo l’elemento che mostreremo e nasconderemo. Immettete il seguente codice sotto il pulsante:

<div ng-hide=”isHidden”>

Click the button above to toggle.

</div>

Il valore nell’attributo ng-hide è il nostro modello. Siccome è compreso nello scope, possiamo facilmente modificarlo nel controller:

$scope.clickHandler = function(){

$scope.isHidden = !$scope.isHidden;

};

Qui stiamo invertendo il valore del modello, che a sua volta rende visibile o meno il <div>.

Se lo aprite nel browser, vedrete che l’elemento è nascosto per impostazione

predefinita. Esistono alcuni sistemi per gestire questo aspetto. Potremmo impostare il valore di $scope.hidden su true nel controller, oppure impostare il valore di hidden su true utilizzando la direttiva ng-init. Altrimenti è possibile ricorrere alla direttiva ng-show che ha un comportamento contrario rispetto a ng-hide e renderà visibile un elemento se il valore di un modello è impostato su true.

NOTA

Verificate che Angular sia caricato nell’header, altrimenti ng-hide e ng-show non funzioneranno correttamente. Questo perché Angular utilizza le sue classi per nascondere gli elementi e queste devono essere caricate al rendering della pagina.

ng-if

Angular include anche una direttiva ng-if che si comporta in modo simile a ng-show e

ng-hide. Tuttavia ng-if elimina l’elemento dal DOM, mentre ng-show e ng-hide rendono visibili o meno gli elementi.

Osserviamo rapidamente come è possibile utilizzare ng-if nel codice precedente:

(43)

<div ng-if=”isHidden”>

Click the button above to toggle.

</div>

Se volessimo invertire il significato dell’istruzione, sarebbe sufficiente aggiungere un punto esclamativo prima dell’espressione:

<div ng-if=”!isHidden”>

Click the button above to toggle.

</div>

ng-repeat

Ben presto, durante lo sviluppo di una web app, avrete bisogno di rappresentare un array di item. Per esempio, nell’app di gestione dei contatti, potrebbe essere un

elenco di contatti, o qualsiasi altra cosa. Angular consente di raggiungere questo scopo con la direttiva ng-repeat.

Vediamo un esempio di alcuni dati che potreste incontrare. Si tratta di un array di oggetti con molteplici proprietà al suo interno. Per visualizzare i dati, dovremo riuscire ad accedere a ogni proprietà. ng-repeat serve a questo scopo.

Ecco il controller con un array di oggetti del contatto assegnati al modello dei contatti:

function AppCtrl($scope){

$scope.contacts = [ {

name: ‘John Doe’, phone: ‘01234567890’, email: ‘john@example.com’

}, {

name: ‘Karan Bromwich’, phone: ‘09876543210’, email: ‘karan@email.com’

} ];

}

In questo caso abbiamo solo due contatti, ma come potete immaginare, un’API potrebbe servirne centinaia che non sarebbe possibile gestire senza ng-repeat.

Aggiungete un array di contatti al controller e assegnatelo a $scope.contacts. Aprite il file index.html per creare un tag <ul>. Ripeteremo una voce presente in questo elenco non ordinato, quindi questo è l’elemento al quale dobbiamo aggiungere la direttiva:

<ul>

<li ng-repeat=”contact in contacts”></li>

</ul>

(44)

Se sapete come funzionano i cicli in PHP o Ruby, vi sentirete a vostro agio. Create una variabile alla quale poter accedere all’interno dell’elemento corrente che entra nel ciclo. La variabile dopo la parola chiave in fa riferimento al modello che abbiamo creato su $scope nel controller. Così è possibile accedere a qualsiasi proprietà

impostata sull’oggetto, e ogni iterazione o item ripetuti acquisiscono un nuovo scope.

Possiamo visualizzarli sulla pagina utilizzando la sintassi delle doppie parentesi graffe di Angular, come abbiamo visto nel Capitolo 1:

<ul>

<li ng-repeat=”contact in contacts”>

{{contact.name}}

</li>

</ul>

Così verrà visualizzato, come previsto, il nome all’interno della voce dell’elenco e sarà possibile accedere facilmente a qualsiasi proprietà dell’oggetto del contatto facendo riferimento a esso tramite la sintassi a punto standard.

ng-class

Spesso capita di voler modificare o aggiungere una classe a un elemento. A questo scopo possiamo ricorrere alla direttiva ng-class, per definire una classe da aggiungere o da eliminare in base al valore di un modello.

Esistono due sistemi per utilizzare ng-class. Nella sua forma più semplice, Angular applicherà il valore del modello come classe CSS all’elemento:

<div ng-class=”exampleClass”></div>

Se il modello al quale facciamo riferimento è indefinito o falso, Angular non applicherà la classe. Questo sistema è ottimo per le singole classi, ma se volessimo avere maggiore controllo o applicare più classi a un solo elemento? Provate questo codice:

<div ng-class=”{className: model, class2: model2}”></div>

In questo caso l’espressione è un po’ diversa. Disponiamo di un insieme di nomi di classi e il modello con il quale confrontarlo. Se il modello restituisce true, la classe verrà aggiunta all’elemento.

Osserviamolo in azione. Utilizzeremo le caselle di controllo con l’attributo ng-model che abbiamo già esaminato nel Capitolo 1 per applicare alcune classi a un paragrafo:

<p ng-class=”{‘text-center’: center, ‘text-danger’: error}”>

Lorem ipsum dolor sit amet

</p>

(45)

Ho aggiunto due classi Bootstrap text-center e text-danger. Queste esaminano un paio di modelli, che possiamo modificare rapidamente con alcune caselle di controllo:

<label><input type=”checkbox” ng-model=”center”> text- center</label>

<label><input type=”checkbox” ng-model=”error”> text- danger</label>

NOTA

Le virgolette semplici che racchiudono i nomi delle classi nell’espressione sono necessarie solo quando si utilizzano i trattini (-), altrimenti Angular genera un errore.

Quando queste caselle di controllo sono spuntate, le classi opportune vengono applicate all’elemento.

ng-style

In modo simile a ng-class, questa direttiva ci consente di assegnare dinamicamente uno stile a un elemento con Angular. A titolo di esempio creeremo una terza casella di controllo che applicherà altri stili all’elemento paragrafo.

La direttiva ng-style utilizza un oggetto JavaScript standard, e le parole chiave saranno la proprietà che intendiamo modificare (per esempio colore e sfondo).

Questo si può applicare da un modello o un valore restituito da una funzione.

Esaminiamo come associarlo a una funzione che verificherà un modello. Poi possiamo aggiungerlo alla casella di controllo per cambiare gli stili.

Aprite il file controller.js e create una nuova funzione associata allo scope. Qui la chiameremo styleDemo:

$scope.styleDemo = function(){

if(!$scope.styler){

return;

}

return {

background: ‘red’, fontWeight: ‘bold’

};

};

All’interno della funzione dobbiamo verificare il valore di un modello; in questo esempio si chiama styler. Se è falso, non restituirà nulla, altrimenti restituirà un oggetto con le proprietà CSS. Abbiamo utilizzato fontWeight invece di font-weight

nell’oggetto restituito. Entrambi vanno bene e Angular applicherà automaticamente la sintassi camel case nella corretta proprietà CSS. Ricordate che quando si utilizzano

(46)

i trattini nelle parole chiave degli oggetti JavaScript, queste vanno racchiuse tra virgolette.

Questo modello sarà associato a una casella di controllo, come abbiamo fatto con

ng-class:

<label><input type=”checkbox” ng-model=”styler”> ng-style</label>

L’ultima cosa che dobbiamo fare è aggiungere la direttiva ng-style all’elemento del paragrafo:

<p .. ng-style=”styleDemo()”>

Lorem ipsum dolor sit amet

</p>

Angular è in grado di richiamare questa funzione ogni volta che cambia lo scope.

Ciò significa che non appena il valore del modello cambia da false a true, verranno applicati gli stili e viceversa.

ng-cloak

L’ultima direttiva che esamineremo è ng-cloak. Quando utilizzate i template di Angular in una pagina HTML, vengono visualizzate temporaneamente le doppie parentesi graffe prima che AngularJS abbia finito di caricare e compilare tutto sulla pagina. Per ovviare a questo comportamento, dobbiamo nascondere

temporaneamente il template prima che termini il rendering.

Angular consente di farlo con la direttiva ng-cloak, che imposta un ulteriore stile sull’elemento mentre viene caricato, ovvero display: none !important;.

NOTA

Per evitare il flashing durante il caricamento del contenuto, è importante che Angular venga caricato nella sezione head della pagina HTML.

(47)

Quiz

1. Che cosa aggiungiamo in cima alla pagina per poter passare da una vista all’altra?

2. Quante colonne comprende il sistema a griglia di Bootstrap?

3. Che cos’è una direttiva e come viene utilizzata la maggior parte di esse?

4. Quale direttiva dobbiamo utilizzare per eseguire il ciclo dei dati?

(48)

Riepilogo

In questo capitolo abbiamo affrontato molti argomenti; prima di proseguire con il prossimo, riepiloghiamoli.

Bootstrap ci consente di creare rapidamente una navigazione responsive.

Dobbiamo includere il file JavaScript presente nella versione di Bootstrap che abbiamo scaricato per rendere disponibile il pulsante interruttore per la navigazione mobile.

Abbiamo anche esaminato il potente sistema a griglia responsive incluso in Bootstrap e creato un semplice layout a due colonne. Durante questa operazione abbiamo analizzato i quattro diversi prefissi delle classi per le colonne e nidificato la griglia. Per adattare il layout abbiamo scoperto alcune classi helper incluse nel

framework che ci consentono di rendere mobili, centrare e nascondere gli elementi.

Abbiamo esaminato in dettaglio le direttive integrate in Angular, le funzioni che è possibile utilizzare dalla vista. Prima di osservarle in azione, abbiamo creato un controller, ossia una funzione in cui possiamo passare i servizi di Angular sfruttando l’inserimento delle dipendenze.

Le direttive che abbiamo descritto saranno fondamentali man mano che

svilupperemo l’app di gestione dei contatti nel corso del libro. Direttive come ng-click e ng-mouseover sono in sostanza nuovi sistemi per gestire gli eventi, operazione che avete sicuramente svolto con jQuery o vanilla JavaScript, ma direttive come ng-repeat rappresenteranno forse un modo tutto nuovo di lavorare, che introdurrà una logica nella vista per eseguire il ciclo dei dati e visualizzarli sulla pagina.

Abbiamo anche analizzato le direttive che valutano i modelli nello scope e compiono diverse azioni sulla base dei loro valori. ng-show e ng-hide mostrano o

nascondono un elemento sulla base del valore di un modello. Lo abbiamo visto anche con ng-class, che ci ha permesso di aggiungere delle classi agli elementi sulla base dei valori dei modelli.

(49)

Capitolo 3

(50)

I filtri

Nel capitolo precedente abbiamo esaminato uno dei componenti fondamentali di AngularJS: le direttive. Come molti framework, Angular offre altri paradigmi che ci aiutano a sviluppare le app. I filtri permettono di manipolare e ordinare facilmente i dati dalla vista o dal controller, e come per le direttive, ne esistono alcuni efficaci già integrati.

Si possono applicare in molti casi e in questo capitolo ne esamineremo alcuni. Per esempio, è possibile manipolare una stringa, convertendola, localizzandola o

troncandola. I filtri consentono anche di operare con altri tipi JavaScript, come array e oggetti. Forse vi capiterà di impostare una ricerca per filtrare un set di dati di cui avete eseguito il ciclo usando ng-repeat. Tutto questo è possibile con i filtri.

Prima di osservare alcuni filtri inclusi, esamineremo come è possibile applicare un filtro dalla vista.

(51)

Applicare un filtro dalla vista

È possibile applicare i filtri direttamente alle espressioni all’interno dei template.

Ricordate che un’espressione è tutto ciò che è compreso all’interno della sintassi con doppie parentesi graffe o di una direttiva:

{{expression | filter}}

È facile servirsi di un filtro; è sufficiente aggiungere il simbolo pipe (|) seguito dal nome del filtro che intendiamo applicare all’espressione. Possiamo procedere allo stesso modo per applicare più filtri a una sola espressione. È possibile concatenarne più di uno e applicarli in sequenza. Nell’esempio seguente, filter2 verrà applicato all’output del filter1 e così via:

{{expression | filter1 | filter2 | filter3}}

Alcuni filtri possono avere degli argomenti, che si possono applicare ricorrendo a una sintassi simile:

{{expression | filter:argument1:argument2}}

In questo capitolo illustreremo alcuni filtri inclusi in Angular direttamente dalla vista utilizzando la sintassi che abbiamo esaminato. Vedremo come applicare gli stessi filtri dal controller e come crearne uno.

Currency e number

Il primo filtro che analizzeremo formatta i numeri in valuta. Nella versione

localizzata britannica-americana, aggiunge al posto giusto una virgola per separare le migliaia dai decimali. Li fa anche precedere dal simbolo opportuno:

{{12345 | currency}}

Il simbolo della valuta dipenderà dalla versione localizzata. Se utilizziamo quella britannica-americana, per impostazione predefinita, Angular antepone il simbolo del dollaro ($), ma possiamo passare il simbolo da noi scelto come argomento:

{{12345 | currency:’£’}}

È importante ricordarsi di racchiuderlo tra virgolette, come se fosse una stringa.

Angular include anche un secondo filtro per formattare i numeri, che ci offre maggiore controllo; ci consente di specificare il numero di cifre decimali a cui vogliamo arrotondare il numero:

{{12345.225 | number:2}}

(52)

L’output di questo filtro sarà 12,345.23. Come potete osservare, il numero è stato arrotondato a due decimali ed è stata aggiunta una virgola per separare le migliaia.

Lowercase e uppercase

Questi due filtri sono forse i più semplici inclusi in Angular. Convertono la stringa in minuscolo o maiuscolo:

{{‘Stephen’ | lowercase}}

{{‘Declan’ | uppercase}}

L’output di questi filtri è il seguente:

stephen DECLAN

limitTo

In alcuni casi potreste voler limitare il numero di caratteri di una stringa o di un array; questo risultato si può ottenere facilmente in AngularJS utilizzando il filtro

limitTo:

{{‘Lorem ipsum dolor sit amet’ | limitTo:15}}

Questo filtro accetta un solo argomento, che è il numero di caratteri al quale dovrebbe limitarsi l’input. In questo caso abbiamo limitato i caratteri di una stringa, ma potrebbe trattarsi di un array in una direttiva ng-repeat, per esempio:

<div ng-repeat=”array | limitTo:2”></div>

Date

Quando si opera con i dati da una API, spesso la data viene fornita come ora UNIX o come timestamp completo. Non è molto comodo, ma fortunatamente Angular

include un sistema semplice per formattare le date con un filtro:

{{expression | date:format}}

Questo filtro accetta un argomento: format. Per esempio, se abbiamo un timestamp e intendiamo ottenere l’anno, potremmo raggiungere facilmente questo risultato con l’espressione seguente:

{{725508723000 | date:’yyyy’}}

References

Related documents

Dati ufficiali del Ministero dell’Istruzione svedese relativi all’autunno 2009 (Högskoleverket 2011/2: 5). 9 Il termine Next Generation Learning è stato oggetto di

Tutte le scuole, in principio, possono far domanda per essere selezionate per partecipare attivamente alla fase di sperimentazione delle prove; il vantaggio di tale coinvolgimento

Affrontare il problema delle politiche irra- zionali, delle pratiche illegali e degli status discriminatori che affollano il campo delle norme in materia di migrazioni,

Il volume è il primo esito di un progetto più ampio che ha avviato una proficua collaborazione fra l’Università di Stoccolma e la Sapienza-Università di

Questa tesina presenta un’analisi fonetica e sequenziale dell’espressione “hai capito” e delle sue forme estese (per esempio “hai capito o no?”, “hai capito com’è il

Questo studio indaga come le città usano il settore della gastronomia associato al Network delle Creative Cities per sviluppare le loro capacità creative.. In particolare,

Come abbiamo anche visto nel §4.3, la prassi metodologica per studi di questo tipo vuole che le registrazioni e la raccolta di produzioni avvengano generalmente in ambienti

Molti di questi software nascono per la gestione di dispositivi SDR commerciali, quindi poco attenti alla gestione di dispositivi economici e di base, soprattutto in presenza