training-header-angular

Mastering AngularJS

LIVELLO:

INTERMEDIO / AVANZATO

DURATA:

8 ore

PREREQUISITI:

Questo corso è pensato per gli sviluppatori che già utilizzano AngularJS e che conoscono le potenzialità del framework.
Il partecipante dovrebbe conoscere buona parte delle nozioni affrontate durante le due giornate del corso Sviluppare applicazioni web con AngularJS. In particolar modo dovrebbe possedere una certa familiarità nell’utilizzo delle direttive e dei servizi inclusi nel framework e, preferibilmente, anche se non indispensabile, aver già creato delle direttive custom, seppur semplici.

OVERVIEW:

AngularJS nasce con l’intento di essere flessibile e scalabile. La sua struttura riprende best-practice e concetti sviluppati e consolidati negli anni da numerosi framework. Tuttavia, molti sviluppatori utilizzano solamente una piccola parte del reale potenziale offerto da AngularJS e questa giornata è dedicata all’approfondimento e all’utilizzo di metodologie, best practices e costrutti allo scopo di realizzare architetture solide e scalabili e approfondire tematiche quali lo sviluppo di direttive custom, l’utilizzo di service/factory, le promises e molto altro, allo scopo di sfruttare pienamente le funzionalità del framework.

OBIETTIVI FORMATIVI:

Durante il corso saranno approfondite diverse tematiche fondamentali per la creazione di codice di qualità e per lo sviluppo di componenti riutilizzabili in AngularJS: moduli, service, factory e provider, eventi, promises, watcher.  Verrà posta particolare attenzione a come AngularJS gestisce internamente gli aggiornamenti tramite il ciclo di $digest, alla configurazione dei moduli e a come viene gestite dal framework la Dependency Injection.

il resto della giornata sarà invece dedicato alla creazione di direttive custom: dalle nozioni fondamentali – scope isolation, transclusion e link function – ad argomenti più avanzati come pre e post function, compile, direttive nidificate, controller, ereditarietà e priority.

Un argomento molto delicato è l’integrazione di elementi estranei al framework all’interno del normale ciclo di vita di AngularJS. Per approfondire questi scenari verranno utilizzati plugin di terze parti come jQueryUI, GSAP TweenMax, HTML5 Canvas/CreateJS e WebGL/ThreeJS.

CONOSCENZE IN USCITA:

Il partecipante apprenderà tecniche e metodologie per lo sviluppo di applicazioni enterprise solide e scalabili in AngularJS, si approfondiranno concetti e funzionalità avanzate del framework e sarà dato ampio spazio allo sviluppo di direttive custom, analizzandone il ciclo di vita e sfruttando al massimo le potenzialità di questo strumento. Si prenderà confidenza con il ciclo di digest e si comprenderà quali requisiti è necessario soddisfare per integrare AngularJS con librerie di terze parti.

MATERIALE DIDATTICO:

Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso.

IL PROGRAMMA:

Model

Creazione di elementi riutilizzabili e configurabili:

  • moduli AngularJS
    • gestione dipendenze
    • concetto di modularità
  • $service
  • $factory
  • $provider e modalità di configurazione
  • utilizzo dei $watcher
    • in factory
    • in direttive custom

AngularJS Internals 

  • come funziona il 2-way binding
  • ciclo di $digest
  • Dependency Injection in AngularJS
  • attenzione alle ottimizzazioni

Promises

  • introduzione alle promises
  • promises in AngularJS: provider $q e oggetti deferred
  • esporre funzionalità asincrone in factory e services
  • concetti avanzati: catene asincrone e gestione personalizzata degli errori
  • metodi .success ed .error del provider $http

Creazione direttive custom con integrazione di librerie 3rd party open source

  • Utilizzare e integrare i plugin di jQueryUI all’interno di direttive
  • Gestire animazioni e creare componenti interattivi con GSAP e Tweenmax.
  • Creare direttive custom che integrano HTML5 canvas e CreateJS per lo sviluppo di custom chart e infografiche
  • Integrazione WebGL / ThreeJS all’interno di direttive AngularJS: creare un viewer 3D per il caricamento di differenti modelli 3D animati in formato collada

Custom Directives Advanced

  • Gestione e organizzazione direttive in moduli
  • Manipolazione DOM in direttive
    • gestione di eventi esterni ad AngularJS
    • Utilizzo di $applyAsync e $evalAsync
  • Controllers in directive
    • bindToController
    • controllerAs
  • Coesistenza di direttive multiple sullo stesso nodo
    • priority
    • terminal
  • Directive nidificate
    • utilizzo di require
  • utilizzo pre and post link functions
  • Utilizzo di $compile all’interno di direttive

TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

AngularJS, HTML5, CSS, Javascript, HTML5 Canvas/CreateJS, WebGL/ThreeJS, jQueryUI, GSAP TweenMax, Bootstrap, npm, Bower