AngularJS-Intro

HTML enhanced for web apps!
Introduzione al mondo di AngularJS
vitconte@gmail.com

Cos’è
Framework JavaScript pensato per semplificare
e velocizzare la realizzazione di applicazioni
web dinamiche.

Come
● arricchendo l’HTML con elementi e attributi
● consentendo la modifica dinamica dei contenuti della view
● separando la logica di business da quella di presentazione

La potenza in Hello Word!
1. <html>
2. <head>
3. <script src="https://ajax.googleapis.com/ajax/
4. libs/angularjs/1.2.7/angular.min.js"></script>
5. </head>
6. <body>
7. <div ng-app>
8. <label>Name:</label>
9. <input type="text" ng-model="yourName"
placeholder="Enter a name here">
10. <hr>
11. <h1>Hello {{yourName}}!</h1>
12. </div>
13. </body>
14. </html>
Angular provvederà ad aggiornare il
valore della proprietà yourName in tutti
gli elementi della pagina che la
richiamano

L’essenziale
1. <html>
2. <head>
3. <script src="https://ajax.googleapis.com/ajax/
4. libs/angularjs/1.2.7/angular.min.js"></script>
5. </head>
6. <body>
7. <div ng-app>
8. ...
9. </div>
10. </body>
11. </html>
angular.min.js: la libreria
ng-app: confini di un’
applicazione angularjs

Cosa succede
● L’HTML è un linguaggio di murkup per la creazione di ipertesti
● Il browser traduce L’HTML nel DOM (Document Object Model), quindi
scatena l’evento Ready()
● Angular cattura questo evento ed entra in gioco riscrivendo il DOM o parte
di esso
● Quale? Quello nei confini di ng-app

Il binding
1. …
4. <hr>
6. ...
entrambi quest elementi sono legati alla
stessa variabile del modello yourName
Sarà Angular a mantenere aggiornati gli elementi del DOM rispetto le proprietà del Modello

Tipi di binding
● Data binding unidirezionale {{}} o ng-bind
○ è il modello a dettare legge
● Data binding bidirezionale ng-model
○ il modello e la view sono sincronizzati
● One-time binding {{::nomeProprietà}}
○ la view è un’istantanea del modello al render della pagina

Come avviene il binding
Durante il bootstrap dell’applicazione angular:
● ricerca gli elementi e gli attributi aggiunti all’HTML, le direttive
● crea dei listner per ognuno di questi elementi in modo da poter gestire la
sincronizzazione tra esso e gli elementi del modello

Direttive
Tutti quegli attributi e quelle notazioni che non sono parte dell’HTML ma che vengono utilizzate da
AngularJS per estendere lo stesso sono chiamate direttive
1. <body>
2. <div ng-app>
3. ...
4. </div>
5. </body>
3. <hr>
...
ng-bind
...
ng-repeat

Architettura
Sebbene si ha una certa flessibilità nello sviluppo di applicazioni con AngularJS
si dovranno comunque definire un Modello, una View e un Controller:
● Un modello contenente dati che rappresentano lo stato corrente dell’
applicazione
● Una vista che visualizza questi dati
● Un controller che gestisce l’interazione tra il modello e la vista

Il pattern MVW
● AngularJS è stato spesso accostato al pattern MVC
● Ultimamente è stato accostato al pattern MVVM (l’oggetto $scope viene considerato come un
ViewMode)
● In realtà secondo gli autori AngularJS adotta il pattern MVW (Model View Whatever), dove
Whatever sta per qualsiasi cosa sia adatta al vostro caso.
Having said, I'd rather see developers build kick-ass apps that are
well-designed and follow separation of concerns, than see them waste
time arguing about MV* nonsense. And for this reason, I hereby
declare AngularJS to be MVW framework - Model-View-Whatever. Where
Whatever stands for "whatever works for you".

Architettura esempio
1. <body ng-app>
2. <div ng-controller="HelloController">
4. <input type="text" ng-model="yourName" placeholder="Enter a
name here">
5. <input type="button" value="Reset" ng-click="Reset()">
6. <hr>
8. </div>
9. </body> function HelloController($scope) {
$scope.yourName = 'No Name';
$scope.Reset = function() {
};
}

Model
● L’intera applicazione è guidata dal modello
● Rispecchia lo stato dell’applicazione
● Determina quali viste mostrare
● Cosa mostrare nelle viste
● Dove lo trovo? $scope
function HelloController($scope) {
};
}
<input type=”text” ng-model=“yourName” />
<h1>Hello {{yourName}}</h1>

Controller
● Simile al code behind di .net
● Possono essercene diversi
○ ognuno ha effetto entro i confini del
suo ng-controller
● Definisce la logica di business
● Inizializza il modello
● Definisce le operazioni possibili sul modello
1. <div ng-controller=“HelloController”>
2. …
3. </div>
};
}

Template vs View
...
<ul>
Template View
<li ng-repeat="casa in elencoCase">
{{casa.nome}}
</li>
</ul>
...
...
<ul>
<li>Milano</li>
<li>Roma</li>
<li>Palermo</li>
</ul>
...
$scope.elencoCase = {
{name:'casa1', citta:’Milano’},
+ =
{name:'casa2', citta:’Roma’},
{name:'casa3', citta:’Palermo’}
};
}
?

Dependency Injection
Pattern Architetturale
Coinvolge almeno tre elementi:
● una componente dipendente,
● la dichiarazione delle dipendenze del componente, definite come interface contracts,
● un injector (chiamato anche provider o container) che crea, a richiesta, le istanze delle classi che
implementano delle dependency interfaces.
function HelloController($scope)
{
};
}
Componente
dipendente
Dichiarazione delle
dipendenze

Annotation
// INFERRED
$injector.invoke(function(serviceA){});
// ANNOTATED
function explicit(serviceA) {};
explicit.$inject = ['serviceA'];
$injector.invoke(explicit);
// INLINE
$injector.invoke(['serviceA', function
(serviceA){}]);

Vantaggi:
● Favorisce la separazione delle responsabilità tra i componenti
● Promuove la testabilità
● Migliora la modularità

Single-page application
Migliorare l’user experience rendendo fluida la navigazione nelle web application, limitando il ricaricamento solo di
quelle parti della pagina interessate dalla richiesta (griglie, liste, …).
Come gestire il cambio pagina di una single-page application con AngularJs?
…
<header>
<h1>Header</h1>
</header>
<div class="content">
<div ng-view></div>
</div>
<footer>
<h5>Footer</h5>
</footer>
…
La direttiva ng-view può essere vista come un segnaposto per il
modulo $route.
E’ il posto dove le view verranno innestate.

Route
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
// Le regole di routing vanno definite qui
}]);
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
});
}]);
Il route di moduli o app va
definito nella funzione config
Per aggiungere un route
specifico dobbiamo usare il
metodo when

Route
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
});
.otherwise({redirectTo: '/'});
}]);
Se nessuna regola è
soddisfatta, viene chiamato il
metodo otherwise

Riferimenti
● Email: vitconte@gmail.com
● LinkedIn: http://www.linkedin.com/pub/vittorio-conte/30/29a/191
● AngularJS Italia
○ LinkedIn: https://www.linkedin.com/groups/AngularJS-Italia-7442742
○ Twitter: @AngularJSItalia

AngularJS-Intro

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à AngularJS-Intro

Similaire à AngularJS-Intro (20)

AngularJS-Intro