Sviluppare applicazioni HTML5 solide e scalabili in AngularJS

Transcript

1 Sviluppare applicazioni HTML5 solide e scalabili in AngularJS PREREQUESITI: 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. ORARIO: 2 giornate di 8 ore 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, validazioni 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.

2 OBIETTIVI FORMATIVI: Durante il corso si analizzeranno le principali funzionalità offerte dal framework, dai concetti base alla creazione di direttive custom, 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 e i discenti avranno inoltre la possibilità di completare alcuni semplici esercizi sotto la supervisione del docente. Tutti i discenti avranno inoltre la possibilità di affrontare un test finale per dimostrare di aver acquisito le nozioni illustrate durante il corso. MATERIALE DIDATTICO Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso. IL PROGRAMMA DAY 1 Panoramica sul framework AngularJS jquery vs Angular AngularJS Installation Two Way Data Binding

3 Controller e $scope Dependancy injection $scope $http $rootscope $location $timeout $window Direttive AngularJS ng click ng show / ng hide ng repeat Events, Properties and controller ng options ng switch ng include ng sanitize / ng bind html e gestione dipendenze moduli DYNAMIC STYLING: inline dynamic styling ng style ng class FORM E VALIDATORS Form and field validators $invalid, $valid, $error, $required $dirty, $pristine $setpristine FILTERS Date Filter

4 Currency Filter Number Formatter i18 and locale options (forse da eliminare) Filtrare ng repeat Use Filter in Javascript DAY 2: MODULES, CONFIG e RUN Sviluppo applicazioni modulari Utilizzare i metodi config() e run() Moduli e dipendenze CONTROLLERS MULTIPLI Suddividere l applicazione in diversi controller Ereditarietà dei controller gestione scope ESERCIZIO: creare una semplice applicazione e integrare le YouTube Data API per recuperare e visualizzare informazioni CSS ANIMATIONS utilizzo ngclass e CSS transition introduzione ad nganimate NAVIGAZIONE e ROUTING Suddividere un applicazione in diversi HTML e controller Gestire la navigazione tramite menu ng view

5 route provider Sviluppo applicazioni dinamiche in 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 Popolare le view con contenuti acquisiti da servizi REST Creazione menu dinamici da JSON 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 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. <my panel> ), 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 Transcude Utilizzo dei templates all interno di direttive Scope isolation: "@", "=", true e false Scope isolation "&" e comunicazione con l esterno Link function Integrazione 3rd party API (YouTube Data API)