La maggior parte delle funzionalità di AngularJS viste fin qui sono adatte a siti Web come ad applicazioni Web (o applicazioni HTML). Sebbene la differenza tra i due sia molto sottile, è ormai consolidata l'architettura per applicazioni Web che va sotto il nome di Single Page Application o SPA.
In estrema sintesi, una SPA viene eseguita all'interno di una singola pagina HTML: tutte le risorse necessarie alla sua esecuzione vengono caricate dinamicamente ed aggiunte al DOM della pagina corrente. In altre parole, all'interno di una singola pagina vengono caricate viste diverse in base all'interazione dell'utente con la pagina stessa.
Questo approccio consente di creare applicazioni responsive che si avvicinano al funzionamento delle applicazioni desktop.
La transizione tra una vista e l'altra dà l'illusione all'utente di continuare a navigare tra pagine diverse dal momento che ciascuna vista ha un proprio URL, anche se in realtà tutto avviene in un'unica pagina HTML. Il meccanismo che consente di mappare un URL ad una vista è detto routing.
AngularJS supporta il routing tra viste tramite il servizio $route, il cui utilizzo richiede l'introduzione di alcuni concetti ed una opportuna configurazione. Ma procediamo per gradi introducendo i vari concetti tramite un esempio concreto: la visualizzazione di un elenco di utenti con la possibilità di vedere i dettagli di ciascun utente cliccando su un elemento dell'elenco.
Dipendenza da ngRoute
La prima cosa da fare per sfruttare il servizio di routing di Angular è inserire il riferimento al file angular-route.js nella nostra pagina HTML:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>Infatti, questo servizio non fa parte delle funzionalità interne di AngularJS, ma è comunque disponibile sul sito ufficiale del framework.
Il file definisce il modulo Angular ngRoute che mette a disposizione tutto l'occorrente per gestire il routing, quindi dobbiamo indicare al framework che la nostra applicazione dipende da questo modulo:
angular.module("myApp", ["ngRoute"]);A questo punto il servizio di routing è disponibile all'interno della nostra applicazione.
Link utili
- Single Page Application Definizione su Wikipedia