AngularJS – Creare applicazioni single page

Ritorniamo con la nostra guida su Angular. Come promesso nel precedente articolo, dopo aver visto come funziona e come si utilizza Angular, possiamo procedere con la creazione di un’applicazione single-page con il framework di Google.

Nel corso di questo articolo apprenderemo:

  • Quali sono i principali moduli di Angular e come importarli
  • Come utilizzare il modulo ngRoute
  • Come utilizzare i template di Angular

Negli esempi riportati in questo articolo useremo la versione 1.2.9 di Angular.

I moduli Angular

I moduli di Angular possono essere considerati delle applicazioni, ma vengono definiti come oggetti (tramite la funzione angular.module) utilizzando una metodologia dichiarativa.

Questa metodologia permette al modulo di definire configurazioni, servizi, controller, direttive, e molto altro, mettendoli in un pack riutilizzabile anche in futuro.

Abbiamo già visto come creare un modulo nel precedente articolo:

var listaDellaSpesa = angular.module('listApp', []);

Angular mette a disposizione già diversi moduli; in rete è possibile trovarne molti altri creati da terze parti.

Nel caso dei moduli forniti da Angular, possiamo trovare gli script da includere nel nostro progetto su Github, in Google CDN, su code.angularjs.org o tramite Bower.

I principali moduli messi a disposizione da Angular sono:

  • ngAnimate: permette di gestire animazioni CSS3 quando cambia la view gestita da Angular (per esempio quando viene aggiunto un elemento facendolo apparire con un effetto)
  • ngCookies: wrapper per la gestione dei cookies tramite js
  • ngLocale: servizio di localizzazione per diversi componenti di Angular
  • ngMock: modulo utilizzato per il test di singole parti di applicazioni
  • ngResource: questo modulo ci aiuta a interagire con un WebService con architetture RESTful
  • ngRoute: modulo che permette di creare rotte e di associare ad esse direttive e controller
  • ngSanitize: parser HTML che pulisce il codice da input insicuri
  • ngScenario: utilizzato per effettuare test a intere feature di un’applicazione
  • ngTouch: fornisce eventi di tipo touch ed altri helper per i dispositivi touch

Oggi, in questa guida, vedremo come utilizzare ngRoute.

 ngRoute: creare le rotte

Immagine1

Supponiamo di voler dividere l’applicazione che abbiamo realizzato nell’articolo precedente in tre pagine:

  1. la prima pagina identica a come è attualmente

  2. la seconda in cui visualizziamo solo le cose da comprare

  3. la terza in cui visualizziamo solo le voci della lista che abbiamo già comprato.

Iniziamo perciò importando il modulo ngRoute nella nostra applicazione (trovate l’esempio completo qui):

<!doctype html>
<html ng-app="listApp">
  <head>
    <title>Lista della spesa</title>
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
 		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  </head>
  <body>
  		<div ng-controller="ListCtrl">
 		 	<ul>
 		 		<li ng-repeat="elemento in lista">
 		 			<input type="checkbox" ng-model="elemento.comprato" />
 		 			<span ng-if="!elemento.comprato">{{ elemento.nome }}</span>
 		 			<span ng-if="elemento.comprato" style="text-decoration:line-through;">{{ elemento.nome }}</span>
 		 		</li>
 		 	</ul>
 		 	<input type='text' id='input_nome'/><button ng-click="aggiungi()">Aggiungi</button>
 		 </div>

 		 
 		 <script type="text/javascript" src=https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js'></script>
 		 <script type="text/javascript" src='assets/js/main.js'></script>
 		
  </body>
</html>

A questo punto dobbiamo dichiarare la dipendenza, tramite l’array passato come secondo parametro (main.js), utilizzando il nome del modulo:

var listaDellaSpesa = angular.module('listApp', [‘ngRoute’]);

Definiamo a questo punto le rotte tramite l’utilizzo della funzione config del modulo, in questo modo:

listaDellaSpesa.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/index', {
                templateUrl: 'index'
            }).
            when('/todo', {
                templateUrl: 'todo'
            }).
            when('/comprate', {
                templateUrl: 'comprate',
                controller: 'comprateCtrl'
            }).
            otherwise({
                redirectTo: '/index'
            });
    }]);

$routeProvider viene automaticamente passato alla funzione dall’injector, di cui abbiamo già parlato nei precedenti articoli.

Le rotte di Angular funzionano tramite l’utilizzo dell’hash, stiamo quindi andando a definire tre rotte:

  • nostrapagina.html#/index
  • nostrapagina.html#/todo
  • nostrapagina.html#/comprate

La funzione when applica a ognuna di queste rotte un template e un controller.

I template possono essere pagine HTML esterne oppure template definiti direttamente nella stessa pagina (la soluzione che adotteremo in questo esempio) e vengono passati a $routeProvider tramite il parametro templateUrl.

In alternativa, tramite una stringa si può passare direttamente HTML alla funzione when utilizzando il parametro template.

La funzione otherwise ci permette di definire una rotta di default dove l’utente sarà redirezionato nel caso in cui la rotta su cui è posizionato non esista.

Ho definito un controller sulla rotta /comprate per aggiungere una funzione e un bottone che ci permetterà di cancellare tutte le cose che abbiamo già spuntato dall’elenco.

I template

Immagine2

I template in Angular possono essere definiti all’interno del tag:

<script  type="text/ng-template" id="NOME_TEMPLATE"></script>

All’interno del template possiamo scrivere codice HTML ed espressioni Angular che verranno valutate.

I template vengono caricati dentro una direttiva ngView:

<div ng-view></div>

Rivediamo perciò il codice HTML della nostra pagina come segue:

<!doctype html>
<html ng-app="listApp">
  <head>
    <title>Lista della spesa</title>
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
 		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  </head>
  <body>

  		<div ng-controller="ListCtrl">
  			<a href="#/index">INDEX</a>
  			<a href="#/todo">TODO</a>
  			<a href="#/comprate">COMPRATE</a>
  			<br/>
  			<br/>
  			<div ng-view></div>
 		 </div>
		 <script type="text/ng-template" id="index">
	  			INDEX
	 		 	<ul>
	 		 		<li ng-repeat="elemento in lista">
	 		 			<input type="checkbox" ng-model="elemento.comprato" />
	 		 			<span ng-if="!elemento.comprato">{{ elemento.nome }}</span>
	 		 			<span ng-if="elemento.comprato" style="text-decoration:line-through;">{{ elemento.nome }}</span>
	 		 		</li>
	 		 	</ul>
	 		 	<input type='text' id='input_nome'/><button ng-click="aggiungi()">Aggiungi</button>
	 		 </script>
	 		 <script type="text/ng-template" id="todo">
	 		 	TODO
	 		 	<ul>
	 		 		<li ng-repeat="elemento in lista" ng-if="!elemento.comprato">
	 		 			<input type="checkbox" ng-model="elemento.comprato" />
	 		 			<span ng-if="!elemento.comprato">{{ elemento.nome }}</span>
	 		 		</li>
	 		 	</ul>
	 		 	<input type='text' id='input_nome'/><button ng-click="aggiungi()">Aggiungi</button>
	 		 </script>
	 		 <script type="text/ng-template" id="comprate">
	 		 	COMPRATE
	 		 	<ul>
	 		 		<li ng-repeat="elemento in lista"  ng-if="elemento.comprato">
	 		 			<input type="checkbox" ng-model="elemento.comprato" />
	 		 			<span ng-if="elemento.comprato" style="text-decoration:line-through;">{{ elemento.nome }}</span>
	 		 		</li>
	 		 	</ul>
	 		 	<button ng-click="cancella()">Cancella tutti gli elementi gi&agrave; comprati</button>
	 		 </script>

 		
 		 <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js'></script>
 		 <script type="text/javascript" src='assets/js/main.js'></script>
  </body>
</html>

Come si può notare il corpo della pagina è di per se vuoto: abbiamo i link che puntano alle diverse view e la direttiva ng-view per visualizzarle, il resto è tutto stato scorporato nei template.

Il primo template, chiamato index, è identico alla pagina principale dell’applicazione del precedente articolo.

Il secondo template, chiamato todo, ci fa vedere solamente i punti ancora da spuntare, filtrando gli elementi solo quando il flag comprato è negativo:

<li ng-repeat="elemento in lista" ng-if="!elemento.comprato">

Lo stesso ragionamento viene applicato in modo inverso in comprate:

<li ng-repeat="elemento in lista" ng-if="!elemento.comprato">

Ho poi aggiunto a questa view un bottone per cancellare tutti gli elementi già comprati:

<button ng-click="cancella()">Cancella tutti gli elementi gi&agrave; comprati</button>

Con la direttiva ng-click verrà chiamata la funzione cancella sullo $scope più vicino: per questa rotta abbiamo definito un controller adibito a questo scopo. Vediamone l’implementazione (file main.js):

listaDellaSpesa.controller('comprateCtrl', ['$scope',function comprateCtrl($scope) {
  $scope.cancella = function(){
    var arrayLength = $scope.$parent.lista.length;
    for(var i = 0;i < arrayLength;i++){
        if($scope.$parent.lista[i].comprato)
        {
            $scope.$parent.lista.splice(i,1);
        }
    }
  }
}]);

Questo controller si occupa solo di definire la funzione cancella; a sua volta questa funzione controlla tutti gli elementi della lista e cancella quelli che sono segnati come comprati.

Il controller attuale è figlio di ListCtrl, perciò possiamo accedervi tramite $parent e utilizzare la lista contenuta sullo scope padre.

La funzione splice è una funzione nativa in Javascript e permette di rimuovere uno o più elementi da un array.  Il primo parametro rappresenta l’indice dell’array da cui iniziare a rimuovere gli elementi, il secondo il numero di elementi da rimuovere.

Conclusioni

Abbiamo visto come creare delle rotte con Angular: questa tecnica ci permette di poter “cambiare pagina” lato client, quindi richiedendo una sola pagina al server.

Questa pratica consente agli sviluppatori di dividere back-end e front-end, anche a livello di risorse, facendo comunicare l’applicazione Angular con il server tramite AJAX.

Possiamo inoltre usufruire del model che viene sincronizzato tra le diverse viste.

E poi, grazie a questo metodo, possiamo sfruttare i vantaggi che troviamo ogni volta che si parla di AngularJS: velocità di sviluppo, riutilizzabilità e metodo di lavoro.

Vedremo nel prossimo articolo come utilizzare le rotte in modo più dinamico.

Alla prossima!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , , ,

L'autore

Diplomato in informatica, inizia la sua esperienza di web developer all’età di 17 anni con le prime collaborazioni. Attualmente Wordpress, Symfony, Bootstrap e AngularJS compongono le sue giornate insieme a vari caffè. Ama sviluppare e collaborare con i creativi; tolto il lavoro la sua passione sono le moto.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

3 commenti

  1. PIetro

Trackback e pingback

  1. AngularJS – Creare applicazioni single pa...
    […] Ritorniamo con la nostra guida su Angular.  […]

Lascia un Commento

Current day month ye@r *