How do I "think in Angular",
if I have a jQuery background?
Hackatron 17/09/2013 @ H-FARM
Lo speaker di oggi...
Matteo Rosati (@rosatimatteo)
Web Developer H-ART
http://mrosati.it
Outline 1 / 2
- Introduzione
- Demo 1: data binding
- installazione
- ng-app, cos'è?
- binding e filters
- Demo 2: controllers, moduli e animazioni
- MVC vs "CDS"
- introduzione ai controller
- la documentazione di Angular
- scope e "digest"
- moduli
- animazioni
Outline 2 / 2
- Demo 3: routing, servizi e factory
- introduzione al routing in Angular
- creazione del router
- introduzione ai servizi (e factory)
- le form (validazione, ecc.)
- $resource
- Demo 4: direttive
- indroduzione della direttive
- direttive semplici
- confronto con mondo jQuery
- esempi a bomba
Introduzione
- AngularJS != jQuery
- AngularJS != Backbone
- Cosa fa automaticamente per noi:
- DOM manipulation
- setting-up listeners and notifiers
- input validation
Feature chiave
- Nessun linguaggio di templating, il tuo HTML è il tuo template!
- Approccio dichiarativo: estende il markup per aggiungere funzionalità in modo chiaro e manutenibile
- Elimina quasi completamente il codice "boilerplate" per implementare data binding e dependency injection
- Logica completamente modularizzabile: ogni "pezzo" dell'applicazione (direttive, servizi, eccetera) sono moduli separati, questo facilita la testabilità e favorisce il riuso.
Esempio introduttivo
Bootstrap di un'applicazione
- Caricamento di Angular
- la direttiva ng-app è la radice della applicazione. Al DOM ready questa direttiva viene cercata e caricato (se esiste) il modulo associato
- viene creato l'injector
- compila il DOM a partire dall'elemento radice (può anche non essere il tag html!)
Bootstrap manuale
- preferibile se si vuole il pieno controllo in fase di inizializzazione
- abbiamo dovuto specificare un nome di modulo per la app, e abbiamo legato a "document" il root scope della nostra applicazione
Direttive
- sono ciò che permette al compilatore HTML di angular di "estendere" la sintassi di HTML, aggiungendo nuovi attributi/classi/commenti
Esempio "draggable"...
Le view
- Rappresentazione "classica" di un sistema di templating e two-way data binding di AngularJS
- Angular compila il DOM con le sue direttive, e il risultato è una funzione di linking che riflette le modifiche al model in tempo reale nel markup HTML
Lo "scope"
- Lo scope è la "colla" che lega assieme i dati con le view (solitamente attraverso un controller)
- gli scope possono essere annidati, seguendo la gerarchia del DOM
- gli scope forniscono un contesto all'interno del quale vengono eseguite le expressions
Moduli
- Il metodo consigliato per sviluppare una app con Angular prevede di suddividere la logica in moduli, ad esempio
- un modulo per i servizi
- uno per le direttive
- uno per i filtri
- un modulo dipendente da tutti i precedenti che contenga il codice di inizializzazione
- Questo tipo di organizzazione aiuta a rendere il codice più testabile e scalabile
- Esempio: http://codepen.io/mrosati84/pen/jdozD
Cos'è il "modello"
- un modello è un qualsiasi dato raggiungibile come proprietà di un oggetto scope
- gli assegnamenti dei valori possono essere espliciti, o derivare da direttive ed espressioni, ad esempio
Cos'è un controller
- è una funzione il cui scopo è manipolare valori e comportamenti di oggetti di tipo scope
- è preferibile definire un controller usando il metodo "controller" di un modulo angular
- un controller non dovrebbe MAI contenere logica per la modifica del markup!
- ...e nemmeno occuparsi di formattare input o output (per quello ci sono i filtri)
Ereditarietà dei controller
Le view (in dettaglio)
(attenzione! FooCtrl usa una sintassi obsoleta!)