training-header-angular

Sviluppare applicazioni web in AngularJS

LIVELLO:

PRINCIPIANTE

DURATA:

16 ore (2 giornate)

PREREQUISITI:

Il partecipante dovrà possedere una certà familiarità con l’uso di HTML, Javascript (variabili, manipolazione array e oggetti, cicli) e preferibilmente aver già utilizzato in precedenza jQuery.

OVERVIEW:

Google AngularJS, uno dei framework Javascript più interessanti del momento, è utilizzato per lo sviluppo di applicazioni HTML5 modulari, solide e scalabili.

Il framework include moltissimi strumenti per velocizzare e semplificare lo sviluppo di applicazioni AJAX, tra cui un approccio MVW, dependency injection, gestione moduli, filtri, formatters, view e routing, validatori, form e moltissimi componenti (direttive) e servizi pronti all’uso.

Configuratori prodotti, CMS e CRM, siti web, tool di collaborazione, software di domotica e IoT, front-end per arduino, applicazioni realtime multi-utente, kiosk touch, fast prototyping, applicazioni per TV, Chromecast e Facebook sono solo alcuni esempi di progetti realizzabili in AngularJS.

angularjs-demo

OBIETTIVI FORMATIVI:

Durante il corso si analizzeranno le principali funzionalità offerte dal framework, dai concetti base alla creazione di direttive e componenti riutilizzabili, allo scopo di fornire le nozioni fondamentali per la creazione di applicazioni web dinamiche.
Il corso include diverse sessioni di teoria accompagnate da decine di esempi pratici.

CONOSCENZE IN USCITA:

Il partecipante avrà il know-how necessario per sviluppare in modo autonomo delle Single Page Application in AngularJS, creando direttive personalizzate e utilizzando la maggior parte dei servizi, dei componenti e delle utility fornite dal framework.

MATERIALE DIDATTICO:

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

IL PROGRAMMA – 1^ GIORNATA:

INTRODUZIONE AL FRAMEWORK

  • Panoramica sul framework AngularJS
  • jQuery vs AngularJS
  • Configurazione e Boilerplate

CONTROLLERS e TWO-WAY BINDING: utilizzare lo scope, binding bidirezionale, creazione di template HTML dinamici (view) , suddividere un’applicazione in differenti controllers e gestire il modello di dati (model).

DIRETTIVE BUILT-IN: fondamentali per la creazione di single page applications, siti web e componenti interattivi: ng-click, ng-show / ng-hide, ng-repeat, ng-options, ng-include, ng-src, ng-href e molte altre.

DEPENDENCY INJECTION e SERVIZI BUILT-IN: Angular include un discreto numero di servizi “pronti all’uso” che possono essere utilizzati con estrema facilità. Verranno introdotti alcuni di questi servizi e in particolar modo il servizio “$http” utilizzato per invocare servizi REST e caricare dati da file JSON.

DYNAMIC STYLING: ng-style e ng-class sono gli strumenti più utilizzati per creare layout e stili interattivi che mutano al variare del modello di dati.
Moltissimi esempi pratici sperimentando differenti tecniche e approcci.

FORM e VALIDATORS: i validatori integrati in AngularJS semplicano notevolmente la creazione di form anche molto complessi: analisi dei validatori, gestione errori, corretta gestione degli stati dirty e pristine e molto altro.

FILTERS: i filtri di AngularJS non solo permettono di “filtrare” un elenco di elementi del DOM e di effettuare ricerche all’interno di un modello di dati ma possono essere utilizzati per formattare date, valute, json, stringhe e numeri. Verranno inoltre trattati argomenti come i18, locale e internazionalizzazione.

IL PROGRAMMA – 2^ GIORNATA:

MODULES, CONFIG e RUN

  • Sviluppo applicazioni modulari: moduli e dipendenze
  • Utilizzare il metodo run()
  • Condividere dati tra controller grazie agli strumenti forniti dal framework

CONTROLLERS MULTIPLI

  • Suddividere l’applicazione in diversi controller
  • Controller nidificati
  • Comunicazione tra controller

NAVIGAZIONE e ROUTING

  • Suddividere un’applicazione in parziali HTML e controller multipli
  • Gestire la navigazione tramite navigation bar
  • Gestire route con parametri

DYNAMIC DOM, ANGULARJS e BOOTSTRAP

  • Introduzione a Bootstrap e utilizzo dei template
  • Conversione di layout statici in dinamici grazie ad AngularJS
  • Menu, navigazione e suddivisione del sito in parziali HTML
  • View dinamiche con contenuti acquisiti da servizi REST
  • Tip & Tricks

DATA-DRIVEN COMPONENTS

  • Utilizzo di menu e navigation bar di Bootstrap
  • Generare menu dinamici, la cui struttura e i cui contenuti sono definiti in un file di configurazione JSON
  • Caricare contenuti e template dinamici

SVILUPPO DIRETTIVE CUSTOM

Lo strumento più interessante presente in AngularJS è senza dubbio la direttiva, che permette di estendere il vocabolario HTML e creare nuovi tag (es. ), isolando la logica Javascript del nuovo elemento dal resto dell’applicazione e creando quindi codice modulare, riusabile e scalabile.
Verranno sviluppate diverse direttive custom allo scopo di acquisire i seguenti concetti:

  • Creazione direttive e componenti riusabili
  • Transclusion
  • Utilizzo dei templates all’interno di direttive
  • Scope isolation: “@”, “=”, true e false
  • Scope isolation “&” e comunicazione con l’esterno
  • Link function
  • Comunicazione con il server e integrazione REST API

TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

AngularJS, HTML5, CSS, Javascript, jQuery, GitHub REST API, Bootstrap, npm, Bower