�ݺ�ߣ

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=/slideshow/angular-js-routing-50182451/50182451/"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>'
});
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=/slideshow/angular-js-routing-50182451/50182451/"rubrica/rubrica-controller.js"></script>
</html>
index.html

Route - Controller
// alternativa poco elegante
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
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
.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 path
o $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 corrente
o $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’evento
next 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’evento
next 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 corrente
previous, route precedente
rejection, è l’errore

�ݺ�ߣ

Angular js: routing

More Related Content

Angular js: routing

Editor's Notes