AngularJS – Reinventare le applicazioni web

Illustreremo il «magnifico» mondo di AngularJS cercando
di capire le potenzialità di questo framework per lo
sviluppo di applicazioni web «moderne»
 Parte 1. Panoramica sul «FrontEnd»
 Parte 2. Introduzione
 Parte 3. Building Blocks
 Parte 4. MyBooks SPA

Come sono cambiati gli approcci
nella creazione di applicazioni web
durante gli ultimi 15 anni

http://yahoo.com
Snapshot del 31 Maggio del 2000

http://yahoo.com
Maggio del 2013

“Your code calls a library but a
framework calls your code”
http://gettingreal.37signals.com/ch04_
Make_Opinionated_Software.php

La filosofia, la storia, le astrazioni e i
concetti chiave alla base di AngularJS

There is nothing to inherit, nothing to call...
This is a stark contrast to most frameworks which
force you to implement its interfaces, call its API
and live by its lifecycle and its events.
It really is just a better browser!
Misko Hevery creatore di AngularJS
I often say that Angular is what the
web browser would have been, had it
been designed for applications…

 Approccio Dichiarativo alla programmazione (DSL)
 Two-Way Databind / Modello osservabile
 Usa Plain Old Javascript Objects (POJO)
 È facilmente integrabile con jQuery
 Testabile in ogni sua parte: Test First , Test All
 Design trasparente e coerente (Architettura SOLIDa)

Primo esempio: «Hello World» of
course!

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#yourName").keyup(function () {
$("#helloName").text("Hello " + this.value + "!");
});
});
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" id="yourName">
<hr>
<h1 id="helloName"></h1>
</div>
</body>
</html>

<!doctype html>
<html ng-app>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/ang
ular.min.js"></script>
</head>
<body>
<div>
<label>Hello</label>
<input type="text" ng-model="yourName">
<hr>
<h1>Hello {{ yourName || „Luca‟ }}!</h1>
</div>
</body>
</html>

jQuery fornisce un’astrazione sulle funzionalità del
browser (navigare il DOM, abbonarsi ad eventi, ecc…)
AngularJS costruisce invece un’astrazione più sofisticata
imperniata sulle relazioni tra gli elementi contenuti nella
pagina web.
Il valore di AngularJS sta nel nascondere la complessità di
questo approccio.

 L’HTML è un linguaggio di Codifica (markup) pensato
per la creazioni di ipertesti. Fa parte della famiglia dei
linguaggi Dichiarativi
 Il Browser traduce l’HTML in un Document Object
Model cioè la rapprentazione in memoria del
documento
 Quando termina la costruzione del DOM il Browser
invia un evento “Ready()”

 AngularJS può intercettare questo evento e riscrivere
tutto o parte del DOM
 Il processo di riscrittura è “guidato” dal markup
contenuto nel DOM stesso
<input type=“text” focus value=“{{
Name }}”/>
<welcome message=„Hello
AngularJS!‟/>

 Pattern MVC
 Scope
 Expression {{ }}
 DataBinding (1 & 2Way)
 Direttive
 Filtri
 Routing
 Templating
 Dependency Injection
 Module
 Service models
◦ Provider
◦ Factory
◦ Service
◦ Value
 Constant
NON POTREMO VEDERLI TUTTI!

“For several years AngularJS was closer to MVC (or rather one
of its client-side variants), but over time and thanks to many
refactorings and api improvements, it's now closer to MVVM –
the $scope object could be considered the ViewModel that is
being decorated by a function that we call a Controller.
……
I hereby declare AngularJS to be MVW framework - Model-
View-Whatever
”
Igor Minar – Google AngularJS Development Team

 Caricamento di AngularJS (CDN o locale)
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.0.6/angular.min.js"></script>
 Fase di Bootstrap
<html ng-app>
 Dichiarazione delle relazioni (tramite markup)
ng-model="yourName" oppure {{yourName}}
 Fase di Plumbing (opzionale)
angular.module(„myApp‟).config(…).run(…);

Possiamo pensare al controller come il punto di
connessione tra il model e la view. Ma cosa fa
esattamente:
1. Inizializza lo Scope
2. Aggiunge comportamenti allo Scope (le azioni dei
pulsanti, dei link, ecc..)
3. Invoca i servizi
4. Deve essere «leggero» ( NO! Fat Controller )
5. E’ simile al code behind di una pagina ASP.NET

E’ un «servizio» fondamentale per AngularJS:
1. E’ il contenitore del Model (Scope != Model)
2. Per ogni controller esiste un solo Scope
3. Lo Scope eredita in modo prototipale dal proprio
Padre
4. Esiste un RootScope globale e condiviso da tutta
l’applicazione
5. Possiamo creare Scope Isolati e protetti solo nelle
Direttive

Le modifiche apportare
al modello sono
propagate
automaticamente
da AngularJS

Estendono il vocabolario HTML con tag e attributi
personalizzati. Possiamo definire un Domain Specific
Language per la UI della web appliations.
Vi sono direttive custom e di sistema, ve sono oltre 50
tra cui:
<ng-repeat>, <ng-switch> <ng-show>, <ng-hide>, <ng-
class> <ng-include>, <ng-view> multiple, selected,
checked, disabled, readonly, required

Esiste un apposito servizio $http per «parlare» in modo
asincrono con il server. Restituisce delle promises che
sono analoghe ai Task di .NET
$http({method: „GET‟, url:
fetchUrl})
.success(function(data,
status) {
// dati
})
.error(function(data, status)
{
);
$http.get(), $http.post(),
$http.delete(),

Non hanno lo stesso significato che gli attribuiamo nel
backend.
 Sono oggetti che incapsulano parti di codice comune a
tutta l’applicazione (promuovono il riuso).
 Vengono instanziati tramite Dependency Injection
 Ci sono più strategie di attivazione (Provider, Factory,
Service, Value)
 Esistono servizi built-in ($http, $q, $window, $log,
ecc..)
 Possono essere «estesi» tramite pattern es: Decorator,
Proxy, ecc..

 Pattern Architetturale
 Favorisce la separazione delle responsabilità tra i
componenti
 Promuove la testabilità del framework
 Migliora la modularità del codice
 Lato Javascript:
◦ I Servizi vengono identificati per nome e iniettati nelle
function
◦ Usa il concetto di «annotation» per superare i problemi di
risoluzione dei nomi delle dipendenze nelle risorse
«minificate»

 Aiutano la formattazione dei dati
 Possono limitare o controllare il numero di elementi
con cui iterare sulla view (paginazione, orderby)
 Come in Unix sono concatenabili ( | )
{{ firstName | lowercase }
{{ amount | currency:”€” }
{{items | orderBy:'timestamp':true | limitTo:10}}

Il miglior modo per capire AngularJS è provarlo!
http://angularjs-mybooks.azurewebsites.net

 La DotDotNet è un'associazione culturale con il compito di
promuovere la più ampia diffusione dell'informatica, della
telematica, della multimedialità e dei collaborative tools, con
particolare attenzione allo sviluppo di software su piattaforma
Microsoft .NET. (dall’art. 1 dello statuto DotDotNet)
 Associazione no-profit
◦ Opera in tutta la regione
 Gruppo di professionisti, studenti e appassionati.
 Feedback
 Adesione:
http://dotdotnet.org/content/Adesione.aspx

AngularJS – Reinventare le applicazioni web

More Related Content

What's hot

Similar to AngularJS – Reinventare le applicazioni web

More from Luca Milan

AngularJS – Reinventare le applicazioni web