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, …
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
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
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.
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
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
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
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];
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; }
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 {…} }
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 {…} }
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 {…} }
• 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()); [ ] ( )
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
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
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’));
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() );
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); } });
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();
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
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
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
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
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
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