26-28 Luglio Angular 2. One framework. Mobile and desktop.

Transcript

1 26-28 Luglio 2016 Angular 2 One framework. Mobile and desktop.

2 AGENDA Gli argomenti che affronteremo in questa sessione 1 INTRODUZIONE 3 Cos è Angular 2 e perchè dovremmo usarlo. Architettura generale del framework e caratteristiche principali. SERVIZI Cosa sono i servizi e perchè sono fondamentali nell architettura del framework. 2 COMPONENTS e DATA-BINDING Cosa sono i components e come strutturano un applicazione. Principi di data-binding. 4 DEPENDENCY INJECTION Come funziona la DI in Angular e come possiamo trarne vantaggio. Cosa sono i providers e tipi principali. 2 INTRODUZIONE Angular 2 Framework supportato da google per sviluppare applicazioni web e mobile Promuove ordine architetturale Orientato a tecniche e tecnologie moderne (web-components...) Interamente open-source 3

3 NUOVE TECNOLOGIE ES6 Harmony e TypeScript Nel Giugno 2015 Ecma International ha reso standard una nuova versione di EcmaScript (ES6), del quale JavaScript è un implementazione Molte delle novità non sono ancora supportate dai browser.. Angular2 è scritto in TypeScript, sebbene si possano scrivere applicazioni usando ES5 4 ES6 Novità principali Let e Const Arrow Functions Template strings Destructuring Moduli Promises native Parametri di default 5

4 ES6 Come usarlo oggi Per essere certi che il nostro codice sia supportato da tutti i browser è bene (per il momento) convertirlo in ES5 Babel Opensource Traceur Google 6 TypeScript Nuove tecnologie by Microsoft Aggiunge il concetto di TIPO e di INTERFACCIA, quindi avremo debug a compile-time Implementa già oggi alcune funzionalità di ES7 (in draft) Ha il suo compilatore interno che permette di specificare il target dell output intellisense type-checking statico 7

5 TypeScript in Angular 2 É un linguaggio strongly typed L informazione sui tipi è contenuta in file *.d.ts Questa caratteristica garantisce migliore supporto da parte degli editor, migliore debug e in generale tools più potenti 8 TypeScript in Angular 2 Un decorator è una funzione che aggiunge dei metadati ad una classe e ai suoi metodi Un decorator si applica prima della definizione della classe target Angular 2 ne @Injectable.. 9

6 ARCHITETTURA Concetti di base Un modulo è un un blocco di codice coeso che svolge una funzione specifica Ogni file con un istruzione di import o export è un modulo Un modulo può importare altri moduli 10 ARCHITETTURA Concetti di base Le applicazioni Angular 2 sono composte interamente da moduli I moduli sono legati da una struttura ad albero Il framework stesso è composto da moduli 11

7 ARCHITETTURA Concetti di base Components Services Router Directives 12 ARCHITETTURA Concetti di base Navbar Sidebar Tweet list 13

8 ARCHITETTURA Concetti di base Navbar Tweet list Sidebar Tweet Tweet Tweet 14 ARCHITETTURA Concetti di base Navbar Sidebar Tweet list Tweet Tweet Tweet Like Like Like 15

9 ARCHITETTURA Concetti di base App Navbar Tweet List Sidebar Tweet Like 16 ARCHITETTURA Ad alto livello 17

10 KEEP CALM it s time for #CODING Esercizio #1 OBIETTIVO Familiarizzare con le principali novità di ES6 STEPS 1. Uso di let e const 2. Arrow function 3. Class 4. Promise 19

11 COMPONENTS Introduzione Un component è l unione di una classe TS e di un template HTML La classe rende disponibili dei dati al template e ne gestisce la logica di interazione con l utente 20 COMPONENTS Un primo esempio Il aggiunge dei metadati alla classe e serve ad Angular per creare la giusta istanza di component e pubblicarla con il suo template come View 21

12 Esercizio #2 OBIETTIVO Creare la prima applicazione Angular 2 STEPS 1. Download del seed dal repository Glue Labs 2. Aggiungere due components 3. Innestare i due components 22 DATA-BINDING Introduzione Senza un framework è necessario modificare manualmente il valore mostrato dalle view e reagire all interazione dell utente. Angular 2 supporta il data-binding. Il data-binding è la definizione di una relazione tra gli elementi HTML dei template e i dati del nostro modello. 23

13 DATA-BINDING 1. Interpolation Mostra nella view il valore di una proprietà del component {{ <exp> }} Tipologie 2. Property binding Crea una relazione tra un attributo di un elemento del DOM con una proprietà del component 3. Event binding Crea un collegamento tra una funzione specificata nel component e un evento appartenente all elemento del DOM 24 DATA-BINDING Property binding ed Event binding Proprietà del DOM Proprietà di Direttive Proprietà di Componenti <img [src]= > <div [ngclass]= > <avatar [id]= > <img (click)= > <form (ngsubmit)= > <avatar (onsave)= > CUSTOM BINDINGS 25

14 DATA-BINDING Custom Bindings Property propertyname: string; Event eventname = new EventEmitter(); I components comunicano tra loro con le proprietà (verso il basso) e con gli eventi (verso l alto) 26 DATA-BINDING Custom Bindings 27

15 Esercizio #3 OBIETTIVO Familiarizzare con i 3 tipi di data-binding che il framework ci fornisce STEPS 1. Aggiungere un espressione con interpolazione 2. Aggiungere al nostro root component un tag <img /> e dichiarare un binding di tipo proprietà sull attributo src 3. Aggiungere un tag <button></button> e definire un binding di tipo evento sul click 28 DATA-BINDING Two-way data-binding Attraverso l attributo (direttiva) ng-model è possibile combinare event binding e property binding sugli elementi di input. Il valore fluisce dal DOM al component e viceversa I due versi permettono di ottenere il two-way data binding 29

16 Esercizio #4 OBIETTIVO Implementare il two-way data-binding STEPS 1. Aggiungere un input di testo e definire su di esso l attributo (direttiva) ng-model 2. Mostrare il valore inserito dall utente in un <p></p> attraverso interpolazione 3. e attraverso una variable locale #? Angular only updates the bindings (and therefore the screen) if we do something in response to asynchronous events such as keystrokes. 30 DIRETTIVE Introduzione Una direttiva è un marker che estende il linguaggio HTML Possiamo vederla come un component senza template Consiste di una classe TS con prefisso il 31

17 DIRETTIVE Tipologie Structural directives Modificano il DOM aggiungendo, modificando e rimuovendo nodi Attribute directives Modificano l aspetto o il comportamento di altri elementi, tipicamente sono semplici attributi di altri elementi HTML 32 Esercizio #5 OBIETTIVO Familiarizzare con le direttive built-in di Angular 2 STEPS 1. Structural directives con *ngfor, *ngif e ngswitch 2. Attribute directives con ngclass e ngstyle 33

18 DIRETTIVE Custom Le direttive built-in sono poche perchè combinate permettono di ottenere le funzionalità più comuni In casi particolari è possibile definire una nuova direttiva attraverso il 34 DIRETTIVE Custom L elemento al quale verrà applicata la nostra direttiva si chiama Host, ed è possibile comunicare con esso attraverso i <attribute> ) Definisce un binding tra un attributo dell elemento host e una proprietà della <event> ) Registra un listener su uno specifico evento sollevato dall host 35