angular js: routing
TRANSCRIPT
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.
Single Page Application
Le SPA (Single Page Application): ● esperienza di navigazione fluida;● rendering asincrono di parti della pagina; ● Gmail.
Strumenti maggiormente usati:● Jquery● Ajax
Single Page Application
Vantaggi:● ottima user experience;● velocità; ● mobile friendly.
Svantaggi:● ottima conoscenza di javascript;● strumenti meno evoluti;● codice meno strutturato.
Single Page Application
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
angular.module('engWs')
.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
angular.module('engWs')
.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)
angular.module('myApp', [])
.run(['$rootScope', '$location', function($rootScope, $location) {
$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
angular.module('myApp', [])
.run(['$rootScope', '$location', function($rootScope, $location) {
$rootScope.$on('$routeChangeError',
function(current, previous, rejection) {
})
}])
current, route correnteprevious, route precedenterejection, è l’errore