Angular - Introduction

Introduction to Angular, Angular CLI, Typescript and RxJS.

Transcript

1. ANGULAR IL WEB FRAMEWORK PIÙ STABILE SUL MERCATO
2. Nicola Sanitate linkedin.com/in/nsanitate
3. Nicola Sanitate R&D Manager @ ApuliaSoft
4. Nicola Sanitate Community Manager @ Club degli Sviluppatori
5. Agenda Introduzione - Nicola Sanitate [ Angular, TypeScript, RxJS ] Presentazione - Carlotta Dimatteo [ Componenti ] Logica - Valerio Como [ Servizi ] Navigazione - Nicola Sanitate [ Routing, Forms ]
6. Agenda - Introduzione Angular One framework. Mobile & desktop. TypeScript JavaScript that scale RxJS Lodash for events Challenge - TypeScript Challenge - RxJS
7. Cos’è Angular?
9. Big picture
10. Storia 2010 AngularJS → Prima release 2014 ng-Europe → Annunciata la versione 2.0 di Angular 2016 Angular 2 → Prima stable release 2017 Angular 4 → Prima LTS release
11. TypeScript
12. TypeScript = JavaScript that scale Linguaggio compilato Individua alcuni errori prima del runtime Include funzionalità JS next Permette di utilizzare nuovi standard occupandosi della compatibilità Tipi Offre tipi base e strumenti per definirne di nuovi [ Classi , Interfacce , Enumerativi ] Tanto altro Offre strutture aggiuntive [ Moduli , Decoratori , Generics ]
13. Utility Tipi base Tipizzare le variabili con tipi di base [ boolean , number , string , array ] let isDone: boolean = false; let decimal: number = 6; let color: string = "blue"; let list: number[] = [1, 2, 3];
14. Utility Tipi base Tipizzare le variabili con tipi di base [ boolean , number , string , array ] Interfacce contratti software rispettati da chi le implementa e adottati da chi le usa interface IGreeter { greet(): string; }
15. Utility Tipi base Tipizzare le variabili con tipi di base [ boolean , number , string , array ] Interfacce contratti software rispettati da chi le implementa e adottati da chi le usa Classi Raggruppano proprietà, accessori e metodi garantendo tutte le caratteristiche tipiche delle classi class Greeter implements IGreeter { private _greeting: string; get greeting(): string {…} constructor(message: string) {…} greet(): string {…} }
16. Utility Enum Raggruppano costanti nominate utili per meglio definire un dominio enum Direction { Up, Down, Left, Right }
17. Utility Enum Raggruppano costanti nominate utili per meglio definire un dominio Generics Permettono ad una componente di lavorare con una varietà di tipi class Greeter<T> { private _greeting: T; get greeting(): T {…} constructor(message: T) {…} greet<U>(): U {…} }
18. Utility Enum Raggruppano costanti nominate utili per meglio definire un dominio Generics Permettono ad una componente di lavorare con una varietà di tipi Decorators Metadati che possono descrivere una classe, un metodo, un accessore o una proprietà @Greeting() class Greeter { private _greeting: string; get greeting(): string {…} constructor(message: string) {…} greet(): string {…} }
19. TypeScript Playground typescriptlang.org/play
20. RxJS
21. RxJS = Lodash for events Purity Produce valori usando funzioni pure, rendendo il codice meno soggetto a errori Flow Offre un'intera gamma di operatori che aiutano a controllare il flusso degli eventi Values Mette a disposizione un insieme di operatori utili a trasformare i dati durante il flusso di eventi
22. Observable Collezioni lazy di più valori fruibili in modalità push
23. Observable Creating Può essere creato attraverso uno degli operatori di creazione new Observable<T>(obr => {…}); of('foo', 'bar’); from([1,2,3]); from(fetch(‘/user’)); fromEvent( document.querySelector('.btn’), 'click’);
24. Observable Creating Può essere creato attraverso uno degli operatori di creazione Subscribing Si effettua la sottoscrizione passando una callback per la consegnati dei dati observable.subscribe( x => onNext(x), e => onError(e), () => onComplete() );
25. Observable Creating Può essere creato attraverso uno degli operatori di creazione Subscribing Si effettua la sottoscrizione passando una callback per la consegnati dei dati Executing L’esecuzione produce eventi Next, e si conclude con evento Error o Complete new Observable<number>(obr=> { try { obr.next(1); obr.complete(); } catch (err) { obr.error(err); } });
26. Observable Creating Può essere creato attraverso uno degli operatori di creazione Subscribing Si effettua la sottoscrizione passando una callback per la consegnati dei dati Executing L’esecuzione produce eventi Next, e si conclude con evento Error o Complete Disposing L’esecuzione può essere cancellata let subscription = observable.subscribe(…); subscription.unsubscribe();
27. Operator Funzioni pure che trasformano gli Observable
28. Operator Filter Emette un valore di input solo se passa una funzione di controllo let obs1 = Observable.of(0, 1, 2, 3, 4); let obs2 = obs1.pipe(filter(x => x % 2 === 1)); obs2.subscribe(x => console.log(x));
29. Operator Filter Emette un valore di input solo se passa una funzione di controllo Map Passa ogni valore di input attraverso una funzione di trasformazione let obs1 = Observable.of(1, 2, 3); let obs2 = obs1.pipe(map(x => 10 * x)); obs2.subscribe(x => console.log(x));
30. Operator Filter Emette un valore di input solo se passa una funzione di controllo Map Passa ogni valore di input attraverso una funzione di trasformazione Reduce / Scan Combina insieme tutti i valori di input, utilizzando una funzione accumulatore let obs1 = Observable.of(1, 3, 5); let obs2 = obs1.pipe(reduce((acc, curr) => acc + curr, 0)); obs2.subscribe(x => console.log(x));
31. Operator Filter Emette un valore di input solo se passa una funzione di controllo Map Passa ogni valore di input attraverso una funzione di trasformazione Reduce / Scan Combina insieme tutti i valori di input, utilizzando una funzione accumulatore Take Invia un evento Complete dopo i primi N elementi proveniente dalla sorgente let obs1 = Observable.of('a','b','c','d'); let obs2 = obs1.pipe(take(2)); obs2.subscribe(x => console.log(x));
32. Challenges
33. Challenge - TypeScript 1. Definire una interfaccia IShape con metodo print(): void 2. Definire le classi Square e Circle che implementano IShape e realizzano print() stampando a console rispettivamente [ ] e ( ) 3. Definire un enumerativo EShape con valori Square e Circle 4. Definire ShapeBuilder che tramite build(shape: EShape): IShape trasforma lo enumerativo nel relativo oggetto precedentemente definito 5. Definire una classe generica Group<T> con metodi add(item: T) e remove(item: T) per aggiungere e rimuove item dal gruppo e forEach(cb: (item: T) => void): void che esegue la callback su ogni elemento del gruppo stackblitz.com/edit/aw-typescript-challenge
34. Challenge - RxJS 1. Creare un Observable obs1 che emette i valori da 1 a 10 a distanza di un secondo ciascuno 2. Generare un Observable obs2 applicando la composizione delle seguenti funzioni su obs1 a. Filtrare lasciando passare solo i valori pari b. Trasformare il valore con il suo quadrato c. Trasformare il valore ulteriormente aggiungendolo alla sommatoria dei valori precedenti d. Selezionare esclusivamente i primi 3 valori risultanti stackblitz.com/edit/aw-rxjs-challenge
35. Pausa