26-28 Luglio 2016

Angular 2One framework. Mobile and desktop.

AGENDA

COMPONENTS e DATA-BINDINGCosa sono i components e come strutturano un’applicazione. Principi di data-binding.

2

2

INTRODUZIONECos’è Angular 2 e perchè dovremmo usarlo. Architettura generale del framework e caratteristiche principali.

1 3

4

Gli argomenti che affronteremo in questa sessione

DEPENDENCY INJECTIONCome funziona la DI in Angular e come possiamo trarne vantaggio. Cosa sono i providers e tipi principali.

SERVIZICosa sono i servizi e perchè sono fondamentali nell’architettura del framework.

3

INTRODUZIONEAngular 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

4

NUOVE TECNOLOGIEES6 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

5

ES6

• Let e Const

• Arrow Functions

• Template strings

Novità principali

• Destructuring

• Moduli

• Promises native

• Parametri di default

6

ES6Come usarlo oggi

Babel Opensource

Per essere certi che il nostro codice sia supportato da tutti i browser è bene (per il momento) convertirlo in ES5

Traceur Google

7

TypeScriptNuove tecnologie by Microsoft

Ha il suo compilatore interno che permette di specificare il target dell’output

Aggiunge il concetto di TIPO e di INTERFACCIA, quindi avremo debug a compile-time

Implementa già oggi alcune funzionalità di ES7 (in draft)

intellisensetype-checking statico

8

TypeScriptin 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

9

TypeScriptin Angular 2

Un decorator è una funzione che aggiunge dei metadati ad una classe e ai suoi metodi

Un decorator si applica aggiungendo “@<nome>“ prima della definizione della classe target

Angular 2 ne fornisce alcuni: @Component, @Directive, @Injectable..

10

ARCHITETTURAConcetti 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

11

ARCHITETTURAConcetti 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

12

ARCHITETTURAConcetti di base

Components RouterServices

Directives

13

ARCHITETTURAConcetti di base

Navbar

Sidebar Tweet list

14

ARCHITETTURAConcetti di base

Tweet list

Navbar

SidebarTweet

Tweet

Tweet

15

ARCHITETTURAConcetti di base

Tweet list

Navbar

SidebarTweet

Tweet

Tweet

Like

Like

Like

16

ARCHITETTURAConcetti di base

App

Tweet ListNavbar Sidebar

Tweet

Like

17

ARCHITETTURAAd alto livello

KEEP CALMit’s time

for#CODING

19

Esercizio #1

OBIETTIVO Familiarizzare con le principali novità di ES6

STEPS 1. Uso di let e const

2. Arrow function

3. Class

4. Promise

20

COMPONENTSIntroduzione

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

21

COMPONENTSUn primo esempio

Il decorator @Component aggiunge dei metadati alla classe e serve ad Angular per creare la giusta istanza di component e pubblicarla con il suo template come View

22

Esercizio #2

OBIETTIVO Creare la prima applicazione Angular 2

STEPS 1. Download del seed dal repository Glue Labs

https://bitbucket.org/gluelabs/exercises/downloads 2. Aggiungere due components 3. Innestare i due components

23

DATA-BINDINGIntroduzione

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.

24

DATA-BINDINGTipologie

1. Interpolation Mostra nella view il valore di una proprietà del component {{ <exp> }}

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

25

DATA-BINDINGProperty binding ed Event binding

Proprietà del DOM Proprietà di ComponentiProprietà di Direttive

<img [src]=“…”>

<img (click)=“…”>

<div [ngClass]=“…”>

<form (ngSubmit)=“…”>

<avatar [id]=“…”>

<avatar (onSave)=“…”>

CUSTOM BINDINGS

26

DATA-BINDINGCustom Bindings

Property Binding

@Input() propertyName: string;

Event Binding @Output() eventName = new EventEmitter();

I components comunicano tra loro con le proprietà (verso il basso) e con gli eventi (verso l’alto)

27

DATA-BINDINGCustom Bindings

28

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

29

DATA-BINDINGTwo-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

30

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.

31

DIRETTIVEIntroduzione

Una direttiva è un marker che estende il linguaggio HTML

Possiamo vederla come un component senza template

Consiste di una classe TS con prefisso il decorator @Directive

32

DIRETTIVETipologie

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

33

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

34

DIRETTIVECustom

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 decorator @Directive

35

DIRETTIVECustom

@HostBinding(‘<attribute>’) Definisce un binding tra un’attributo dell’elemento host e una proprietà della direttiva

@HostListener(‘<event>’) Registra un listener su uno specifico evento sollevato dall’host

L’elemento al quale verrà applicata la nostra direttiva si chiama Host, ed è possibile comunicare con esso attraverso i decorator: