Angular.js è un framework javascript patrocinato da Google e basato sul modello MVC: Vediamo come funziona partendo dall’intestazione del nostro file html:
<!DOCTYPE HTML> <html ng-app> <head> <meta charset="utf-8"> <title>Angular js</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script> ... </script> </head>
Ci sono due cose da notare subito: la prima è il collegamento alla libreria, ma questo è scontato, ma soprattutto la direttiva ng-app che indica la root della pagina alla quale applicare il parsing del nostro framework
Il passaggio successivo è quello di preparare una fonte di dati che verranno utilizzati nella nosta pagina:
function BrowserListCtrl($scope) {
$scope.borwsers = [
{"id": "1", "nome": "Chrome"},
{"id": "2", "nome": "Firefox"},
{"id": "3", "nome": "Safari"},
{"id": "4", "nome": "Internet explorer"},
{"id": "5", "nome": "Opera"}
];
}
Questo sarà il nostro controller che contiene l’array di dati in formato JSON
Passaggio successivo sarà associare alla nostra pagina il controller
<body ng-controller="BrowserListCtrl">
e infine preparare la view, con una sintassi un po’ criptica ma decisamente economica:
<ul>
<li ng-repeat=”borwser in borwsers”>
<span>{{borwser.id}}</span>
<span>{{borwser.nome}}</span>
</li>
</ul>
L’esempio completo
Google+
Sorry, the comment form is closed at this time.