2. 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.
3. Single Page Application
Le SPA (Single Page Application):
● esperienza di navigazione fluida;
● rendering asincrono di parti della pagina;
● Gmail.
Strumenti maggiormente usati:
● Jquery
● Ajax
4. Single Page Application
Vantaggi:
● ottima user experience;
● velocità;
● mobile friendly.
Svantaggi:
● ottima conoscenza di javascript;
● strumenti meno evoluti;
● codice meno strutturato.
6. 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.
7. 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']);
8. 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
12. 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
13. 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; }
);
}]
}
});
15. $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'
});
16. $routeParams
// Recupero nel controller
angular.module('engWs')
.controller('dettaglioContattoController', [ '$routeParams', ...
function($routeParams, ...){
// recupero l’id
var id = $routeParams.id
}]);
17. $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
● ...
19. 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 "";
}
};
}]);
20. 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
21. 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
}]);
23. Routing Modes - Base Url
E’ possibile settare l’URL base nell’head dell’HTML
<html>
<head>
<base href="/base/url" />
</head>
…
</html>
24. 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
25. 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’evento
next e previous sono rispettivamente
il nuovo route e quello precedente
26. 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 corrente
previous, route precedente
rejection, è l’errore
Editor's Notes
strumenti meno evoluti: Non ci sono ide di sviluppo paragonabili ad esempio a VS per le tecnologie lato client ma i nuovi software stanno facendo passi da gigante (es. WebStorm);
codice meno strutturato: solitamente le SPA sono implementate con jquery e ajax. Approccio imperativo
Per segnalare ad angular dove renderizzare l’HTML del template che vogliamo visualizzare abbiamo bisogno della direttiva ng-view e del modulo $route
Il servizio $location risolve il problema adattando l’URL per i browser più vecchi. In sostanza usa la modalità Hashbang
