Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular - Introduction

Angular - Introduction

Introduction to Angular, Angular CLI, Typescript and RxJS.

Nicola Sanitate

April 19, 2018
Tweet

More Decks by Nicola Sanitate

Other Decks in Programming

Transcript

  1. Agenda Introduzione – Nicola Sanitate Angular | Angular CLI |

    Typescript | RxJS 01 Presentazione – Carlotta Dimatteo Componenti | Pipe 02 Logica – Valerio Como Servizi | DI 03 Navigazione – Nicola Sanitate Routing | Forms 04
  2. Storia Dalle origini verso il futuro 2010 2014 Prima release

    AngularJS Annunciata la versione 2.0 di Angular ng-Europe
  3. Storia Dalle origini verso il futuro 2010 2016 2014 Prima

    release AngularJS Annunciata la versione 2.0 di Angular ng-Europe Prima release stabile Angular 2
  4. Storia Dalle origini verso il futuro 2010 2016 2014 2017

    Prima release AngularJS Annunciata la versione 2.0 di Angular ng-Europe Prima release stabile Angular 2 Prima release LTS Angular 4
  5. Storia Dalle origini verso il futuro 2010 2016 2014 2017

    2018 Prima release AngularJS Annunciata la versione 2.0 di Angular ng-Europe Prima release stabile Angular 2 Prima release LTS Angular 4 Pianificazione semestrale Angular 5, 6, …
  6. Angular CLI Una command line interface per Angular. Angular CLI

    rende semplice creare una applicazione che funzioni out of the box e che segua le best practice. ng new
  7. Angular CLI Una command line interface per Angular. Angular CLI

    rende semplice creare una applicazione che funzioni out of the box e che segua le best practice. ng new Genera componenti, servizi e molto altro con semplici comandi, creando anche dei file di test per ognuno di essi. ng generate
  8. Angular CLI Una command line interface per Angular. Angular CLI

    rende semplice creare una applicazione che funzioni out of the box e che segua le best practice. ng new Genera componenti, servizi e molto altro con semplici comandi, creando anche dei file di test per ognuno di essi. ng generate Permette di testare facilmente la tua applicazione localmente durante lo sviluppo. ng serve
  9. Angular CLI Una command line interface per Angular. Angular CLI

    rende semplice creare una applicazione che funzioni out of the box e che segua le best practice. ng new Genera componenti, servizi e molto altro con semplici comandi, creando anche dei file di test per ognuno di essi. ng generate Permette di testare facilmente la tua applicazione localmente durante lo sviluppo. ng serve Test, lint e format sono altri strumenti messi a disposizione da Angular CLI che permettono di rendere il tuo codice altamente affidabile, comprensibile e manutenibile.
  10. TypeScript JavaScript that scale. Linguaggio che estende JavaScript senza precludere

    le potenzialità di JavaScript stesso. Superset di JavaScript
  11. TypeScript JavaScript that scale. Linguaggio che estende JavaScript senza precludere

    le potenzialità di JavaScript stesso. Superset di JavaScript Riesce ad individuare alcune tipologie di errore prima del runtime. Linguaggio compilato
  12. TypeScript JavaScript that scale. Linguaggio che estende JavaScript senza precludere

    le potenzialità di JavaScript stesso. Superset di JavaScript Permette di utilizzare I nuovi standard occupandosi della compatibilità con i browser. Include funzionalità JS next Riesce ad individuare alcune tipologie di errore prima del runtime. Linguaggio compilato
  13. TypeScript JavaScript that scale. Linguaggio che estende JavaScript senza precludere

    le potenzialità di JavaScript stesso. Superset di JavaScript Permette di utilizzare I nuovi standard occupandosi della compatibilità con i browser. Include funzionalità JS next Riesce ad individuare alcune tipologie di errore prima del runtime. Linguaggio compilato Permette di utilizzare tipi base e di definirne altri tramite classi, interfacce ed enumerativi. Tipi
  14. TypeScript JavaScript that scale. Linguaggio che estende JavaScript senza precludere

    le potenzialità di JavaScript stesso. Superset di JavaScript Permette di utilizzare I nuovi standard occupandosi della compatibilità con i browser. Include funzionalità JS next Permette l’utilizzo di strutture consolidate in altri linguaggi come moduli, decoratori e generics. Tanto altro Riesce ad individuare alcune tipologie di errore prima del runtime. Linguaggio compilato Permette di utilizzare tipi base e di definirne altri tramite classi, interfacce ed enumerativi. Tipi
  15. TypeScript JavaScript that scale. Typescript mette a disposizione tipi base

    come boolean, number, string e array. Tipi base let isDone: boolean = false; let decimal: number = 6; let color: string = "blue"; let list: number[] = [1, 2, 3];
  16. TypeScript JavaScript that scale. Typescript mette a disposizione tipi base

    come boolean, number, string e array. Tipi base Permettono di definire dei contratti software rispettati da chi le implementa e adottati da chi le usa. Interfacce interface IGreeter { greet(): string; }
  17. TypeScript JavaScript that scale. Typescript mette a disposizione tipi base

    come boolean, number, string e array. Tipi base Permettono di definire dei contratti software rispettati da chi le implementa e adottati da chi le usa. Interfacce Raggruppano proprietà, accessori e metodi garantendo incapsulamento, ereditarietà e tutte le caratteristiche tipiche delle classi. Classi class Greeter implements IGreeter { private _greeting: string; get greeting(): string {…} constructor(message: string) {…} greet(): string {…} }
  18. TypeScript JavaScript that scale. Raggruppano un insieme di costanti nominate

    utili per definire meglio un dominio. Enum enum Direction { Up, Down, Left, Right, }
  19. TypeScript JavaScript that scale. Raggruppano un insieme di costanti nominate

    utili per definire meglio un dominio. Enum Permettono di creare un componente che può lavorare con una varietà di tipi anziché uno solo. Generics class Greeter<T> { private _greeting: T; get greeting(): T {…} constructor(message: T) {…} greet<U>(): U {…} }
  20. TypeScript JavaScript that scale. Raggruppano un insieme di costanti nominate

    utili per definire meglio un dominio. Enum Permettono di creare un componente che può lavorare con una varietà di tipi anziché uno solo. Generics Dichiarazioni che possono essere attaccate ad una classe, un metodo, un accessore o una proprietà. Decorators @Greeting() class Greeter { private _greeting: string; get greeting(): string {…} constructor(message: string) {…} greet(): string {…} }
  21. Challenge stackblitz.com • Definire un’interfaccia IShape con metodo print(): void

    • Definire le classi Square e Circle che implementano IShape e realizzano print() stampando a console rispettivamente [ ] e ( ) • Definire un enumerativo EShape con valori Square e Circle • Definire ShapeBuilder che tramite build(shape: EShape): IShape trasforma l’enumerativo nel relativo oggetto precedentemente definito • 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 • Testare il tutto con il codice qui a sinistra Adesso tocca a voi let builder = new ShapeBuilder(); let square = builder.build(EShape.Square); let circle = builder.build(EShape.Circle); let group = new Group<IShape>(); group.add(square); group.add(circle); group.forEach(item => item.print()); [ ] ( )
  22. RxJS Reactive Extension for JavaScript. Produce valori usando funzioni pure,

    rendendo il codice è meno soggetto a errori. Purity events for Lodash
  23. RxJS Reactive Extension for JavaScript. Offre un'intera gamma di operatori

    che aiutano a controllare il flusso degli eventi. Flow Produce valori usando funzioni pure, rendendo il codice è meno soggetto a errori. Purity events for Lodash
  24. RxJS Reactive Extension for JavaScript. Offre un'intera gamma di operatori

    che aiutano a controllare il flusso degli eventi. Flow Produce valori usando funzioni pure, rendendo il codice è meno soggetto a errori. Purity Mette a disposizione un insieme di operatori utili a trasformare i dati in gioco durante il flusso di eventi. Values events for Lodash
  25. Observable Collezioni lazy di più valori fruibili in modalità push.

    Possono essere costruite, ma solitamente si usano i cosiddetti operatori di creazione. Creating Observable.create(obr => {…}); Observable.of('foo', 'bar’); Observable.from([1,2,3]); Observable.fromEvent( document.querySelector('btn’), 'click’); Observable.fromPromise( fetch(‘/user’));
  26. Observable Collezioni lazy di più valori fruibili in modalità push.

    Possono essere costruite, ma solitamente si usano i cosiddetti operatori di creazione. Creating È come chiamare una funzione, fornendo la callback a cui verranno consegnati i dati. Subscribing observable.subscribe( x => onNext(x), e => onError(e), () => onComplete() );
  27. Observable Collezioni lazy di più valori fruibili in modalità push.

    Possono essere costruite, ma solitamente si usano i cosiddetti operatori di creazione. Creating È come chiamare una funzione, fornendo la callback a cui verranno consegnati i dati. Subscribing Consegna notifiche di tipo Next, finché non ce n’è una di tipo Error o Complete. Executing Observable.create(obr=> { try { obr.next(1); obr.complete(); } catch (err) { obr.error(err); } });
  28. Observable Collezioni lazy di più valori fruibili in modalità push.

    Possono essere costruite, ma solitamente si usano i cosiddetti operatori di creazione. Creating È come chiamare una funzione, fornendo la callback a cui verranno consegnati i dati. Subscribing Consegna notifiche di tipo Next, finché non ce n’è una di tipo Error o Complete. Executing La sottoscrizione produce una subscription con cui è possibile cancellare l’esecuzione. Disposing let subscription = observable.subscribe(…); subscription.unsubscribe();
  29. Operator Funzioni pure che trasformano gli Observable. Emette un valore

    di input solo se passa una funzione di controllo. Filter let obs1 = Observable.of(0, 1, 2, 3, 4); let obs2 = obs1.filter(x => x % 2 === 1); obs2.subscribe( x => console.log(x) ); 1 3
  30. Operator Funzioni pure che trasformano gli Observable. Passa ogni valore

    di input attraverso una funzione di trasformazione per ottenere i valori di output corrispondenti. Map let obs1 = Observable.of(1, 2, 3); let obs2 = obs1.map(x => 10 * x); obs2.subscribe( x => console.log(x) ); 10 20 30
  31. Operator Funzioni pure che trasformano gli Observable. Combina insieme tutti

    i valori di input, utilizzando una funzione accumulatore che sa come unire il valore corrente all'accumulazione precedente. Reduce let obs1 = Observable.of(1, 3, 5); let obs2 = obs1.reduce((acc, curr) => acc + curr, 0); obs2.subscribe( x => console.log(x) ); 9
  32. Operator Funzioni pure che trasformano gli Observable. È come reduce,

    ma emette l'accumulo attuale ogni volta che la sorgente emette un valore. Scan let obs1 = Observable.of(1, 3, 5); let obs2 = obs1.reduce((acc, curr) => acc + curr, 0); obs2.subscribe( x => console.log(x) ); 1 4 9
  33. Operator Funzioni pure che trasformano gli Observable. Prende i primi

    N valori dalla sorgente, quindi completa. Take let obs1 = Observable.of('a','b','c','d'); let obs2 = obs1.take(2); obs2.subscribe( x => console.log(x) ); a b
  34. Challenge stackblitz.com • Importare la libreria rxjs sulla piattaforma •

    Importare Observable dalla libreria rxjs/Rx • Creare un Observable obs1 che emette i valori da 1 a 10 a distanza di un secondo ciascuno • Generare l’Observable obs2 applicando la composizione delle seguenti funzioni su obs1 • Filtrare lasciando passare solo i valori pari • Trasformare il valore con il suo quadrato • Trasformare il valore ulteriormente aggiungendolo alla sommatoria dei valori precedenti • Selezionare esclusivamente i primi 3 valori risultanti • Testare il tutto con il codice qui a sinistra Adesso tocca a voi obs2.subscribe( x => console.log(x) ); 4 20 56