Angular js: routing

AngularJS: Routing

Single Page Application

Il continuo ricaricamento delle pagine nei siti web tradizionali: ● disturba la user experience;● prestazioni generalmente scadenti;● fastidiose su desktop;● ingestibili su mobile.


Le SPA (Single Page Application): ● esperienza di navigazione fluida;● rendering asincrono di parti della pagina; ● Gmail.

Strumenti maggiormente usati:● Jquery● Ajax


Vantaggi:● ottima user experience;● velocità; ● mobile friendly.

Svantaggi:● ottima conoscenza di javascript;● strumenti meno evoluti;● codice meno strutturato.

SPA con AngularJS

Come gestire il cambio pagina di una single-page application con AngularJs?

<HTML>

...

<div class="container" ng-view>

...

</HTML>

La direttiva ng-view può essere vista come un

segnaposto per il modulo $route.

E’ il posto dove le view verranno innestate.

Route

Per definire le regole di routing bisogna:

● Importare la lib angular-route<script src="angular-route.js">

● Dichiarare la dipendenza dal module ngRoute var App = angular.module('WorkshopApp',

['ngRoute']);

Route

var App = angular.module('engWs', ['ngRoute']);

App.config(['$routeProvider', function($routeProvider) {// Le regole di routing vanno definite qui}]);

$routeProvider.when('/home', { templateUrl : 'html/home.html'});

$routeProvider.when('/rubrica', { templateUrl : 'html/rubrica/lista.html', controller : 'rubricaController’'});

Il route di moduli o app va

definito nella funzione config

Per aggiungere un route

specifico dobbiamo usare il

metodo when

Route

$routeProvider.otherwise({redirectTo: '/home'});

Se nessuna regola è

soddisfatta, viene chiamato il

metodo otherwise

Route - template o templateUrl

$routeProvider.when('/home', { template : '<h1>HOME</h1>'});

$routeProvider.when('/rubrica', { templateUrl : 'html/rubrica/lista.html', controller : 'rubricaController'});

Posso indicare l’url del template ma anche definirlo direttamente nella regola di routing.

Route - Controller

Dov’è definito rubricaController?

angular.module('engWs') .controller('rubricaController',

['$scope', '$http', '$location', function($scope, $http, $location){

//Some logic}

rubrica-controller.js

<html>…<script type="text/javascript" src="rubrica/rubrica-controller.js"></script></html>

index.html

Route - Controller

// alternativa poco elegante$routeProvider.when('/rubrica', { templateUrl : 'html/rubrica/lista.html', controller : function($scope){...}});

Posso scrivere la funzione controller direttamente nella regola di routing

Resolve

Dati caricati prima del caricamento del controller e del render della view:● Es. caricamento drop down

$routeProvider.when('/rubrica', { templateUrl : 'html/rubrica/rubrica.html', controller : 'rubricaController', resolve: {

'tipiUtente': ['$http', function($http) {

return $http.get('/api').then(

function success(resp) { return response.data; }

function error(reason) { return false; }

);

}]

}

});

Resolve

// Recupero nel controller

angular.module('engWs')

.controller('rubricaController', ['tipiUtente', ...

function(tipiUtente, ...){

// recupero

$scope.tipiUtente = tipiUtente.data;

}]);

$routeParams

Se in una regola di routing è presente il “:” AngularJS esclude dalla regola tutto ciò che viene dopo e lo inserisce in $routeParams

// Regola di routing

$routeProvider.when('/contatto-edit/:id', {

templateUrl : 'rubrica/contatto/dettaglioContatto.html',

controller : 'dettaglioContattoController'

});

$routeParams

// Recupero nel controller


.controller('dettaglioContattoController', [ '$routeParams', ...

function($routeParams, ...){

// recupero l’id

var id = $routeParams.id

}]);

$location

Servizio che integra windows.location nell’applicazione Angular.Metodi:● path - get del path corrente

o $location.path(); // returns the current patho $location.path('/'); // change the path to the '/' route

● replace - redirect con return button disabilitato (es. dopo il login)o $location.path('/home').replace();

● host - host dell’url correnteo $location.host(); // host of the current url

● ...

Active menu<body ng-app="engWs" ng-controller="indexController">

...<ul class="nav navbar-nav"> <li ng-class="isActive('/rubrica')"><a href="#rubrica">Rubrica</a></li> <li ng-class="isActive('/auth')"><a href="#auth">Autenticazione</a></li> <li ng-class="isActive('/sicurezza')"><a href="#sicurezza">Sicurezza</a></li></ul>...</body>

Active menu


.controller('indexController', ['$scope', '$location', function($scope, $location) {

// definizione variabile globale per gestione active menu

$scope.isActive = function(path) {

if ($location.path().substr(0, path.length) == path) {

return "active";

} else {

return "";

}

};

}]);

Routing Modes

Determina come deve essere l’URL del sito:● Hashbang Mode, (default)

o http://yoursite.com/#/inbox/all

angular.module('myApp', ['ngRoute'])

.config(['$locationProvider', function($locationProvider) {

$locationProvider.html5Mode(false); // non indispensabile

$locationProvider.hashPrefix('!');

}]);

o http://yoursite.com/#!/inbox/all

Routing Modes

Determina come deve essere l’URL del sito:● HTML5 Mode, aspetto di URL regolare tranne che nei

browser più vecchi o http://yoursite.com/inbox/all

angular.module('myApp', ['ngRoute'])

.config(['$locationProvider', function($locationProvider) {

$locationProvider.html5Mode(true); // indispensabile

}]);

Routing Modes - Example

Link: <a href="/rubrica/">Person</a>● Hashbang /index.html#/rubrica● HTML5 /index.html/rubrica

Routing Modes - Base Url

E’ possibile settare l’URL base nell’head dell’HTML

<html>

<head>

<base href="/base/url" />

</head>

…

</html>

Routing Events

E’ possibile introdurre comportamenti custom in diversi momenti del flusso di routing:● $routeChangeStart, avviene quando il route service

inizia a risolvere tutte le dipendenze (resolve)

angular.module('myApp', [])

.run(['$rootScope', '$location', function($rootScope, $location) {

$rootScope.$on('$routeChangeStart',

function(evt, next, current) {

})

}])

evt è l’eventonext e current sono rispettivamente il nuovo route e quello corrente

Routing Events

● $routeChangeSuccess, avviene quando il route service ha risolto tutte le dipendenze (resolve)



$rootScope.$on('$routeChangeSuccess',

function(evt, next, previous) {

})

}])

evt è l’eventonext e previous sono rispettivamente il nuovo route e quello precedente

Routing Events

● $routeChangeError, avviene in caso di errore



$rootScope.$on('$routeChangeError',

function(current, previous, rejection) {

})

}])

current, route correnteprevious, route precedenterejection, è l’errore

Angular js: routing

Documents

Transcript of Angular js: routing