Routing 3517 Visite) AngularJs

Le applicazioni single page sono quelle applicazioni web in cui l'utente non si sposta mai dalla pagina in cui si trova ma rimanene sempre sulla stessa che viene continuamente aggiornata.

Questo tipo di applicazioni utilizzano in maniera massiccia JavaScript e Ajax per modificare dinamicamente la maschera ed i contenuti.

Questo tipo di applicazioni risultano molto dinamiche e veloci, pesando molto poco sui server che si limitano a restituire solo porzioni di HTML o addirittura solamente i dati necessari a ricostruire la pagina.

AngularJS ha dedicato a questo tipo di applicazioni un modulo chiamato Routing che facilita la realizzazione di applicazioni single page. Il modulo Routing permette di definire una sorta di navigazione virtuale. Quanto l'utente naviga su un indirizzo non verrà reindirizzato effettivamente su quella pagina ma indicherà ad angular di sostituire il controller ed una porzione della stessa. L'utente, se la tecnica sarà ben applicata, crederà effettivamente di aver raggiunto un'altra pagina ma in maniera istantanea, senza percepire alcun caricamento del browser. Sfruttando HTML5 vedrà anche aggiornarsi la propria barra degli indirizzi. Moltissime applicazioni e siti utilizzano queste tecniche.

Scaricate lo script Routing dal sito di AngularJs e create l'applicazione AngularJS

var app = angular.module('routing', ['ngRoute']);

Come vedete dopo il nome dell'applicazione é stato inserito il nome del modulo ngRoute. In questo modo AngularJS potrà utilizzare le funzionalità definite all'interno. Ora definiremo la navigazione.

app.config(function($routeProvider,$locationProvider) {

$routeProvider

.when('/demo1.html, {

templateUrl : '/page1.html',

controller  : 'controller1'

})

.when('/demo2.html, {

templateUrl : '/page2.html',

controller  : 'controller2'

});

$locationProvider.html5Mode(true);

});

Con questa descrizione andremo ad indicare che in caso l'utente navigherà sulla pagina demo1 verrà caricato il controller1 e la pagina page1.html, nel caso invece di demo2 la pagina page2.html.

Il comando html5Mode serve ad indicare che andremo ad utilizzare le funzionalità di url rewriting di HTML5. In pratica l'indirizzo sulla barra verrà aggiornato anche se, in realtà, il browser non si sarà mai spostato dalla pagina corrente.

Le pagine html non conterranno l'intera pagina ma solo la porzione che ci interessa.

La pagina principale invece, quella che conterrà la navigazione, sarà una normale applicazione AngularJS, ma al suo interno dovrà avere un tag per ospitare il Routing. Esempio 

<div data-ng-view=""></div>

Le pagine caricate si innesteranno li, sarà sufficiente mettere link ai path definiti negli url e farà tutto AngularJS.

Sarà semplice in questo modo realizzare applicazioni modulari in cui ad ogni funzionalità corrisponde un controller ed una porzione di pagina HTML.

Attenzione, è possibile avere una sola View.

Parametri di routing

Molto spesso quando ci spostiamo da una pagina all'altra abbiamo bisogno di portarci con noi determinate informazioni (identificativi, campi, etc). Ovviamente questo è possibile.

when('/shop/:orderId', {

templateUrl: 'shoppage.html',

controller: 'ShopController'

});

Come vedete abbiamo inserito nell'url da chiamare un campo :orderId. Tutti gli elementi indicati con i due punti iniziali sono parametri, ossia AngularJs prevede che essi siano variabili e non fissi.

app.controller('ShopController', function($scope, $routeParams) {

$scope.order_id = $routeParams.orderId;

});

Passando al controller l'oggetto routeParams,oltre allo scope, potrete leggere i campi così come impostati nel route. Molto semplice come vedete.

Nel prossimi tutorial vedremo come sfruttare al meglio il Routing. Vi lascio al tutorial.

• Routing.zip 65 KB) Download File