Roma @ IED
15 Maggio 2015
<div ng-controller="MyController as my">
<h1>Hello {{ my.data.name }}!</h1>
</div>
app.controller("MyController", MyController);
function MyController() {
var data = { name: "AngularJS" }
this.data = data;
}
var data = { name: "AngularJS"}
<!DOCTYPE html>
<!-- questa pagina attivera' il modulo Angular "myApp" -->
<html ng-app="myApp">
<head>
<!-- inclusione delle dipendenze -->
<script src="https://code.angularjs.org/1.3.15/angular.js">
</script>
<!-- inclusione del modulo Angular e css dell'applicazione -->
<script src="app.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<!-- dichiarazione del root template Angular -->
</body>
</html>
(function() {
var app = angular.module("myApp", [])
app.controller("MyController",
My);
function MyController() {
}
})();
Angular mette a disposizione dello sviluppatore due moduli che semplificano il supporto delle funzionalita' di routing lato client, il piu' semplice dei quali e' fornito dal modulo ngRoute:
Il file js angular-route.js dovra' essere incluso nella pagina HTML in un tag script, e la nostra applicazione dovra' dichiararne la dipendenza aggiungendo ngRoute nella dichiarazione del modulo:
// crea l'applicazione e dichiara la dipendenza
// dal modulo ngRoute
var app = angular.module("RoutingExample",
["ngRoute"]);
Il routing dovra' essere configurato attraverso l'helper app.config:
// registra la funzione di configurazione
app.config(configureRouting);
...
// funzione di configurazione del routing
function configureRouting($routeProvider) {
$routeProvider.when("/section01", {
// selezione del template
template: "<h1> Section 01 </h1> <p>...</p>"
// templateUrl: "..."
// controller: "..."
// controllerAs: "..."
}).otherwise({
// selezione del template di fallback
redirectTo: "/section01"
});
}
Mediante la direttiva ng-view indichiamo ad AngularJS quale parte dell'applicazione dovra' cambiare a seconda di quale regola di routing (e relativo template o templateUrl) verifica la locazione corrente del browser.
<body ng-app="RoutingExample">
<ul>
<li><a href="#/section01">go to 01</a></li>
<li><a href="#/section02">go to 02</a></li>
</ul>
<div ng-view>
</div>
</body>
La direttiva ng-view non puo' essere annidata.
<body ng-app="ex04">
<ul>
<li><a href="#/section01">go to 01</a></li>
<li><a href="#/section02">go to 02</a></li>
</ul>
<ng-view></ng-view>
</body>
var app = angular.module("ex04", ["ngRoute"]);
app.config(configureRouting);
function configureRouting($routeProvider) {
$routeProvider.when("/section01", {
template: "<h1> Section 01 </h1> <p>...</p>"
}).when("/section02", {
template: "<h1> Section 02 </h1> <p>...</p>"
}).otherwise({
redirectTo: "/section01"
});
}
npm e' un gestore di pacchetti per nodejs (un ambiente per lo sviluppo di server e tool a linea di comando scritti in Javascript).
mediante npm e' possibile installare moltissimi dei tool per lo sviluppo web, come static-server (un tool a linea di comando che fornisce un semplice server HTTP) e bower.
$ mkdir myproject
$ cd myproject
$ npm install static-server
static-server@2.0.0 node_modules/static-server
|__ file-size@0.0.5
|__ mime@1.3.4
|__ commander@2.8.1 (graceful-readlink@1.0.1)
|__ chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
Se avete privilegi di amministratori potete installarlo globalmente:
sudo npm install -g static-server
Da terminale nella directory di progetto (es. myproject):
$ ./node_modules/.bin/static-server .
* Static server successfully started.
* Serving files at: http://localhost:9080
* Press Ctrl+C to shutdown.
<-- [GET] /
--> 200 OK / (index.html) 1.03 KiB (10.417ms)
o (se installato globalmente):
$ static-server .
bower e' invece un gestore di pacchetti per applicazioni web.
Mediante bower e' possibile cercare ed installare le piu' comuni dipendenze di una applicazione web (e.g. angular, foundation, jquery etc.)
$ npm install bower
Per installare bower globalmente: sudo npm install -g bower
$ ./node_modules/.bin/bower install angular
bower cached git://github.com/angular/bower-angular.git#1.3.15
bower validate 1.3.15 against git://github.com/angular/bower-angular.git#*
...
o (se installato globalmente): bower install angular