AngularJS è un framework JavaScript che permette di estendere una semplice pagina HTML e renderla dinamica. I componenti principali di un'applicazione AngularJS sono i template ed i controller, un'altra feature importante e che vedremo in questo articolo è il modulo ngRoute.
 
Registriamo la nostra applicazione con le relative dipendenze.
var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers' ]);
in myApp.config() possiamo ora definire il template ed il controller da usare in base all'hash fragment della URL, il modulo ngRoute osserverà i cambiamenti nella URL e servirà i componenti associati grazie all'istruzione when().
myApp.config(function($httpProvider, $routeProvider) {
$routeProvider.when('/', {
        templateUrl : 'template-home.html',
        controller : 'homeCtrl'
    })
    .when('/:detailId', {
        templateUrl : 'template-detail.html',
        controller : 'detailCtrl'
    })
}
Il controller ottiene i dati tramite un web service e li registra nello $scope, così che possano essere utilizzati nel relativo template. Il service $http si occuperà di fare la chiamata ajax, mentre il provider $routeParams ci permette di avere a disposizione i dati di reindirizzamento.
var myControllers = angular.module('myControllers', []);

myControllers.controller('detailCtrl', [
    '$scope',
    '$routeParams',
    '$http',
    function($scope, $routeParams, $http) {
        var url = '/detail/' + $routeParams.detailId + '.json';
        $http.get(url).success(
            function(data) {
                $scope.data = data;
            }
        );
    }
]);
Il nostro template-detail.html stampa a video i dati presenti nello $scope, così come sono stati registrati dal controller.
<h1>{{data.title}}</h1>
<div>{{data.content}}</div>
Il template verrà incluso nella pagina padre da ngRoute tramite la direttiva ng-view. Notare anche che è necessario specificare la nostra app tramite la direttiva ng-app.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset=utf-8 />
  <title></title>
  <script type="text/javascript" src="myApp.js"></script>
</head>
  <body>
    <div ng-view></div>
  </body>
</html>
AngularJS
0 commenti
comments powered by Disqus