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!)




    Demo

    Dev meeting settembre 2013

    By Matteo Rosati Detto Wyoming

    Dev meeting settembre 2013

    • 844
    Loading comments...