Slide per l'ausilio alla presentazione od ad un corso veloce per lo sviluppo di Angular 2. Comprende la struttura principale delle applicazioni di Angular, i componenti, le direttive, i servizi e pipes. Breve panoramica sul typescript e sulle principali librerie.

1. ANGULAR
A cura di Emanuele Benedetti

2. PIANO DEL CORSO
Nozioni di base
Cos’è Angular
NodeJS
Angular-cli
Typescript
Componenti
Direttive
Associazione dei dati
Servizi
Dependency injection
Routing
Connessione al server
Mondo asincrono
Rxjs
Pipes
Librerie
Angular bootstrap
Font awesome
Angular material
Primeng

3. COS’È ANGULAR
Framework
completo
Tutto o
niente
Front end Typescript

4. NODEJS
• Javascript fuori dal browser
• Gestore di pacchetti (npm)
• Web server e backend
• Network scalabile
• Monothread basato su ciclo di eventi
• Open source

5. ANGULAR-CLI
npm install -g @angular/cli
• Generazione di codice
• Development web server
• Test runner

6. TypeScript
npm install -g typescript
• Super set di JavaScript
• Tipi statici
• Funzionalità ES6
• Scalabilità del codice
• Moduli, classi, interfacce ed enumeratori
• Funzioni lamda, asincrone e decoratori
• Supporto ad tools quali lint e intellisense

8. WEBSTORM
https://www.jetbrains.com/webstorm/

9. COMPONENTI
ng generate component myComponent
Architettura modulare
Separazione delle responsabilità
Model – View – ViewModel
Template HTML
Incapsulamento CSS
Input() ed Output()

10. import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes’;
myHero = 'Windstorm’;
constructor() {
}
}

11. DIRETTIVE
• Comportamenti riutilizzabili
• Manipolazioni del DOM
• Manipolazione degli attributi

12. ASSOCIAZIONE
DEI DATI
Visualizzazione dei dati
ngFor, ngIf, ngSwitch
Eventi di output
Binding a due vie

13. ASSOCIAZIONE DATI
• Associazione dati unidirezionale
• Si usa {{ }} per visualizzare attributi del componente
nel modello
• Associazione proprietà (componente > modello)
• si usa [ ]
• Ci sono proprietà per elementi, componenti e
direttive

14. ASSOCIAZIONE DATI
• Associazione dati unidirezionale
• Associazione di eventi (modello > componente)
• Si usa ( )
• Eventi come click, mouse enter, changed…
• Associazione dati bidirezionale
• Invia valori da componente a modello e restituisce valori
modificati da modello a componente
• Si usa [( )]

15. SERVIZI
• ng generate service myService
• Rappresentano la logica condivisa
• Condividono dati o funzioni tra diverse parti di
un'applicazione Angular
• Favoriscono il riutilizzo del codice e contribuiscono
al basso accoppiamento e alta coesione degli
elementi del codice
• Sono iniettabili in altri elementi grazie alla
dependency injection

16. DEPENDENCY INJECTION
• Il modo in cui passiamo un'istanza di un oggetto
ad un'altra parte dell'applicazione Angular
• Le istanze dei servizi sono fornite attraverso i
costruttori
• Diminuzione delle interdipendenze fra elementi
• Decisione degli oggetti da usare a runtime

17. HTTP CLIENT
HTTP REST: GET,
POST, PUT e DELETE
Comunicazione
asincrona
JSON

18. ROUTING
• Il modo in cui ci si sposta nell’applicazione
• <base href=“/”>
• ROUTER_PROVIDERS, @Routes, <Router-outlet>,
[routerLink]

19. ROUTING
• Route nidificate
• Route per modulo
• Route guard
• Activated route
ng generate module --routing=true

20. MONDO ASINCRONO
Single thread Promise Observable
DOM non è thread safe
Ciclo degli eventi
Blocco dell’interfaccia
Accesso a valori non
pronti
Valore singolo
Funzioni resolve() e
reject()
Accesso a valori non
pronti
Valori multipli
Modello
publish/subscribe
Funzioni di
trasformazione e di
flusso

21. RXJS
• Comunicazione asincrona
• Valori multipli
• Modello publish/subscribe
• Vari tipi di observable:
• Observable e Subject
• Operatori:
• Creazione, unione, trasformazione, filtro,
multicast, gestione degli errori, utilità,
decisionali, aggregazione e calcolo.
• High order observable
• Funzione pipe()

22. PIPES
• Formattazione dell’output
• Simbolo |
• Pipe multiple
• Pipe predefinite:
• Date, uppercase, lowercase,
currency, ecc.
• Pipe personalizzate

23. LIBRERIE
Npm install –save @angular/material

24. ANGULAR BOOTSTRAP
• In puro Angular
• Tutti controlli di Bootstrap
• Controlli addizionali:
• datepicker
• rating
• typeahead
• Responsive
• Sistema a griglia
• Oggetti multimediali

25. FONT AWESOME
Migliaia di icone
Possibilità di
combinare le icone
Configurare le
icone con CSS

26. ANGULAR
MATERIAL
• Componenti comuni per desktop, mobile e web
• Configurabile con i temi
• Ottimizzata per Angular
• Componenti per moduli: autocomplete, checkbox,
datepicker, input, ecc.
• Componenti per la navigazione: menu, sidenav,
toolbar
• Componenti per il layout: card, divider, expansion
panel, grid list, ecc.
• Bottoni ed indicatori
• Popup e modal
• Tabelle di dati

27. PRIMENG
• Più di 80 componenti
• Open source
• Temi
• Adatta per il mobile