Angular 7

INDICE
1. Angular CLI (Command Line Interface)
1.1. Installazione
1.2. Generazione nuovo Workspace
1.3. Analisi struttura iniziale Workspace
1.4. Estensione struttura iniziale Workspace
2. First Angular app
2.1. Avvio app
2.2. Analisi file index.html
2.3. Analisi file app.component.ts
2.4. Analisi file app.component.html
3. Componenti
3.1. Creazione manuale e analisi di un Componente
4. Data Binding
4.1. Binding mediante interpolazione di stringhe
4.2. Property Binding
Angular CLI
➢ Tool che semplifica la fase di creazione, sviluppo e test di un progetto

➢ Consente l’inizializzazione dell’applicazione, creazione e configurazione di moduli, servizi, direttive, pipe, etc.

NOTA: In teoria possibile la creazione e la configurazione di un’applicazione anche con la creazione a ‘mano’ di ogni singolo file
Installazione

Comando per una installazione globale, mediante il package

manager NPM:

npm install -g @angular/cli

❏ ng --version per verifica installazione e versione

❏ ng help per elenco opzioni e comandi disponibili
Generazione nuovo Workspace

➢ L’ Angular Workspace rappresenta l’area di lavoro all'interno della quale presenti i vari file di configurazione e le cartelle
contenenti il codice

➢ Comando per la generazione di un nuovo Angular Workspace:

ng new (o in forma abbreviata ng n)

NOTA: Possibile la personalizzazione della configurazione iniziale, mediante opzioni da linea di comando (obbligatorio nome applicazione), o
l’utilizzo di una modalità interattiva e meno personalizzabile, con selezione all'interno della shell delle opzioni per la configurazione del Workspace
Modalità non interattiva Modalità Interattiva

NOTA: Con l’opzione --dry-run elencati nella shell (ma non creati),
file e cartelle che verrebbero creati con un determinato comando.
Utile per analizzare i vari comandi senza che nessun file venga
scritto sul disco, o alcuna dipendenza venga scaricata da NPM
Analisi struttura iniziale Workspace

e2e - File necessari per i test end-to-end di Protractor

node_modules - Package scaricati da NPM ed elencati nelle dipendenze del file package.json

src - File sorgente e di configurazione dell'applicazione iniziale

editorconfig - Definizioni stili editor

angular.json - File di configurazione del Workspace

package/package-lock.json - File di configurazione di NPM, con elenco dipendenze

tsconfig/tslint.json - File di configurazione TypeScript e linter TSLint, utilizzato per analisi codice sorgente
app - Cartella principale dell’applicazione

assets - Immagini e altre risorse da copiare nella cartella in cui inseriti i file dell’applicazione, in seguito alla fase di build
(inizialmente al suo interno presente il file vuoto .gitkeep, convenzione utilizzata per chiedere a Git di tenere traccia di una
cartella, che se vuota invece ignorata)

environments - File in cui definite delle variabili d’ambiente

favicon.ico - Favicon di default utilizzata come icona nella scheda del browser in cui aperta applicazione

index.html - Pagina HTML principale, mostrata all’accesso dell’applicazione

main/test.ts - Punti di ingresso “entry point” dell’applicazione (con codice per l’avvio del modulo base “root module”
dell'applicazione) e dei test

polyfills.ts - Polyfill per supporto a browser meno recenti (frammenti di codice Javascript per rimediare alla mancanza di
funzionalità su browser meno recenti)

style.css - Foglio di stile con le regole globali valide per l'intera applicazione
Nella cartella app/ inizialmente presenti i file del componente base AppComponent,
elemento fondamentale su cui basata la costruzione di un'applicazione Angular

app.component.css - Regole CSS del componente (regole valide per il solo componente AppComponent)

app.component.html - Template HTML associato al componente (Angular offre la possibilità di definire il

template di un componente in un file esterno solitamente denominato <nome-componente>.component.html o
aggiungendo il codice HTML direttamente nell'oggetto passato come argomento al decoratore @Component)

app.component.spec.ts - Test di unità per il componente

app.component.ts - Logica del componente, essenzialmente una classe TypeScript a cui è associato il
decoratore @Component, mediante il quale è definito il componente stesso

app.module.ts - Modulo base “root module” AppModule. Un modulo Angular rappresenta un contenitore in cui
raggruppate diverse parti di un'applicazione, aventi una qualche relazione fra loro
Estensione struttura iniziale Workspace

➢ Comando per la generazione di nuovi elementi Angular:

ng generate <schematic> (o in forma abbreviata ng g <schematic>)

Con l’elemento <schematic> necessario per definire i file che devono essere aggiunti o modificati nel progetto.
Ad esempio:

❏ Nuovo componente ng generate component <nome-componente>

❏ Nuova direttiva ng generate directive <nome-direttiva>
❏ Nuovo servizio ng generate service <nome-servizio>
❏ Nuovo modulo ng generate module <nome-modulo>
❏ Nuova pipe ng generate pipe <nome-pipe>
❏ Nuova classe ng generate class <nome-classe>
❏ Nuova interfaccia ng generate interface <nome-interfaccia>
❏ Nuova applicazione ng generate app <nome-applicazione>
➢ Esempio generazione nuovo componente:

Componente automaticamente inserito in una nuova directory (my-new-component), nella quale raggruppati tutti i file
ad esso associati. Inoltre aggiornato il file app.module.ts, in quanto di default il nuovo componente parte del modulo
base AppModule

NOTA: Con l’opzione --dry-run non realmente generati i file, quindi lasciata intatta la cartella di lavoro, con --skipTest=true non creati i file dei test di
unità, infine se utilizzato anche --flat=true possibile non inserire i file del componente in una cartella separata, ma direttamente nella directory app/
➢ Esempio di generazione di una nuova applicazione ( o
libreria secondaria)

NOTA: I file di 'my-new-app' inseriti nella sottocartella 'project' della directory

base 'my-angular-app'. Inoltre modificato anche il file di configurazione
angular.json, per tener traccia della nuova applicazione creata
First Angular app
Avvio app

➢ Comando per avvio (compilazione/visualizzazione) dell’app:

ng serve

NOTA: ng serve consente di visualizzare in fase di sviluppo un'anteprima della nostra

applicazione nel browser. Con esso creato un web server locale all'indirizzo predefinito
http://localhost:4200 (personalizzabile attraverso le opzioni --host e --port).

NOTA: Grazie alla funzionalità di live reloading del server locale, aggiornata
automaticamente la pagina ad ogni modifica/salvataggio dei file sorgenti. In tal modo
possibile visualizzare in tempo reale lo stato corrente di un'applicazione, senza dover
aggiornare manualmente il browser
Analisi file index.html

➢ File servito inizialmente dal server, il cui contenuto è

visualizzato dall'utente nel browser

NOTA: Dal codice possibile notare l'assenza di qualsiasi elemento HTML di

tipo <script>, in quanto Angular CLI dietro le quinte utilizza Webpack e
provvede ad inserire/iniettare automaticamente tutti i file Javascript e CSS
necessari, durante la fase di build dell'applicazione. Quindi in genere non
necessario aggiungere nessun elemento <script> o <link> manualmente
➢ Con l’avvio dell’app, visualizzato del testo non esplicitamente
presente nel file index.html. Testo che 'appartiene' al componente
AppComponent, e legato al particolare tag HTML <app-root>

NOTA: Dall’analisi del codice sorgente della pagina HTML, possibile notare come
Angular CLI abbia inserito 5 elementi <script>, i quali attraverso l'attributo src
importano altrettanti file Javascript esterni
Analisi file app.component.ts

➢ In Angular un'applicazione è suddivisa e strutturata in uno o più unità fondamentali e riutilizzabili, che prendono il nome di componenti

➢ Alla base di tale struttura esiste un componente radice, che nell'applicazione generata da Angular CLI prende il nome predefinito
AppComponent

➢ Ogni componente può avere altri componenti come discendenti a cui passare delle informazioni, viceversa questi ultimi possono notificare il
componente genitore se qualche proprietà in essi contenuta ha subito delle modifiche

➢ Nel file TypeScript app.component.ts definita la logica del componente AppComponent

➢ Un componente è definito attraverso una semplice classe alla
quale è applicato il decoratore @Component, il quale riceve
come argomento un oggetto con specifiche proprietà che
caratterizzano il componente stesso

➢ Tra le proprietà del componente AppComponent presente il

selettore ‘app-root’, il quale permette di inserire tale componente
all'interno del template di un altro componente, o in tal caso
direttamente nella pagina index.html
Analisi file app.component.html

➢ Il file app.component.html contiene il template/struttura del componente

AppComponent, ovvero cosa deve essere mostrato sullo schermo per tale
componente

➢ L’elemento <div>, del frammento di codice, è inserito come diretto

discendente dell'elemento <app-root> presente nel file index.html

NOTA: La particolare espressione {{title}}, rappresenta una espressione di interpolazione, utilizzata

in Angular per inserire all'interno del template di un componente il valore di una proprietà definita nel
file TypeScript contenente la logica del componente stesso
Analisi file app.module.ts

➢ Una applicazione Angular può essere scomposta in più componenti, i quali visivamente vanno ad occupare una
porzione dello schermo, mostrando delle informazioni e permettendo all'utente di interagire con l'applicazione

➢ Oltre ai componenti, anche altre entità (direttive, servizi, pipe etc.) concorrono alla formazione di una applicazione
Angular, e tutti questi elementi sono mantenuti ed organizzati all'interno dei cosiddetti moduli Angular,
essenzialmente un meccanismo che permette di raggruppare componenti, direttive, servizi e pipe che hanno una
qualche relazione fra loro

➢ Un'applicazione può disporre di un numero indefinito di moduli, ma presenta sempre un unico modulo base (root
module) che nell'esempio è rappresentato dall’ AppModule
➢ Un modulo è definito attraverso una classe alla quale è
applicato il decoratore @NgModule, il quale riceve
come argomento un oggetto di metadata con delle
proprietà specifiche, utilizzate per la definizione del
modulo. Nello specifico quattro array

➢ Con exports possibile elencare un insieme di

componenti, direttive e pipe, che dichiarati in un
modulo, possono essere utilizzati nel template di
qualsiasi componente che fa parte di un secondo
modulo che importa il primo
Array presenti nel decoratore @NgModule:

❏ declarations: Lista di componenti, direttive e pipe che fanno parte di un modulo. Ogni entità deve appartenere ad un solo modulo, altrimenti
emesso un errore dal compilatore. Le classi presenti nell'array risultano visibili all'interno del modulo, ma invisibili ai componenti di altri
moduli a meno che non vengano esplicitamente esportate dal modulo corrente (il quale deve poi essere elencato nell'array imports del
modulo che intende accedere a tali classi)

❏ imports: Insieme di moduli che si intende importare nel modulo corrente

❏ providers: Insieme di servizi

❏ bootstrap: Solitamente unico componente, di norma AppComponent, componente base creato durante la fase di avvio dell'applicazione
Componenti
➢ Per la definizione di un componente, necessaria la creazione dei seguenti file:

❏ Un file TypeScript, con all’interno una classe contenente proprietà e i metodi propri del componente
❏ Un secondo file TypeScript, contenente il codice per il test del componente
❏ Un file HTML, contenente il template per la descrizione della struttura del componente
❏ Un file CSS, contenente le regole per stabilire l’aspetto del componente

➢ La definizione di un componente, possibile attraverso Angular CLI, con la generazione automatica dei file necessari,
oppure manualmente con la creazione di ogni singolo file, come mostrato nelle slide successive
Creazione manuale e analisi di un Componente

1. Creazione sottocartella esempio-componente/, all'interno della

directory src/app/ , dunque aggiunta del file TypeScript
esempio-componente.component.ts

NOTA: Per convenzione, e per meglio strutturare un progetto, i file relativi a un

componente sono inseriti all'interno di una directory identificata dal nome del componente
stesso (più parole vengono separate da un trattino)

NOTA: Per convenzione, i file relativi ad un componente presentano un nome del tipo
nome-componente.component.estensione
 2. Definizione del nuovo componente all’interno del file
esempio-componente.component.ts

2.1. Importazione del decoratore Component da @angular/core

2.2. Definizione di una nuova classe (in tal caso con una sola
proprietà nomeComponente) con il decoratore @Component

NOTA: Per convenzione, nome della classe terminato con la stringa

Component, e scritto secondo la notazione PascalCase (più parole si unite
senza lasciare spazi e con la prima lettera sempre maiuscola)

NOTA: Grazie alla parola chiave export resa disponibile la classe

EsempioComponenteComponent al di fuori del modulo TypeScript corrente
Proprietà oggetto decoratore @Component:

selector: Indicazione del selettore necessario per l’inserimento del componente corrente all’interno del template di un’altro componente (in
tal caso, utilizzato il prefisso predefinito 'app', in teoria anche personalizzabile)

template/templateUrl: Definizione diretta del template HTML del componente mediante stringa (funzionalità ES2015 con la quale possibile
distribuire un template su più righe), o indicazione mediante templateUrl del percorso relativo al file .html contenente il template HTML

styles/styleUrls: Definizione diretta dello stile del componente mediante stringa, o indicazione mediante styleUrls del percorso relativo al
file .css

NOTA: Per template o fogli di stile lunghi e complessi, consigliato l’utilizzo di file esterni con templateUrl e styleUrls
 3. Definizione del template HTML, dunque aggiunta
del file esempio-componente.componet.html e/o
foglio di stile, dunque aggiunta del file
esempio-componente.component.css

NOTA: In tal caso, aggiunto il solo file per il foglio di stile, in quanto
il template HTML inserito in maniera diretta all’interno del
decoratore @Componet
 4. Aggiunta del componente EsempioComponenteComponent
come discendente del componente AppComponent, dunque
inserimento dell’elemento app-esempio-componente all’interno
del template di AppComponent

NOTA: Nome dell'elemento coincidente con quello specificato nella proprietà

selector dell'oggetto passato come argomento al decoratore @Component,
applicato al componente EsempioComponenteComponent
 5. Aggiunta del componente al modulo AppModule

1.1. Importazione della classe presente nel file

esempio-componente.component.ts (esportata grazie alla
parola chiave export), operazione necessaria affinché
TypeScript sia in grado di capire a cosa ci si riferisce con
EsempioComponenteComponent

1.2. Inserimento del componente nell’array declarations

dell'oggetto passato come argomento al decoratore
@NgModule

NOTA: Ogni componente deve essere obbligatoriamente aggiunto ad uno e un

solo modulo. In caso contrario, all’avvio dell'applicazione, visualizzato un
messaggio d’errore
Avvio e visualizzazione dell’applicazione nel browser,
con lancio del server locale mediante il comando:

ng serve --open
➢ Le regole CSS relative a un componente (definite attraverso la
proprietà styles o presenti nei file indicati da styleUrls), hanno validità
solo all'interno del template del componente, dunque sono applicate
solo agli elementi presenti nel template e non sono ereditate da
alcun componente discendente

➢ Facendo riferimento all'esempio, avendo definito una regola per gli

elementi <h2>, Angular applicherà tali dichiarazioni solo agli elementi
<h2> presenti nel template del componente
EsempioComponenteComponent, a tal fine Angular modifica i
selettori delle regole aggiungendo un attributo univoco all'elemento
<h2>, come mostrato nell'immagine
Data Binding
 ➢ Grazie a varie forme di data binding, possibile una comunicazione tra la logica di un componente scritta in
TypeScript ed il suo template HTML. In tal modo fornita dinamicità a quest’ultimo, altrimenti statico a partire dai soli
elementi HTML

NOTA: Per la scrittura di template, mediante il linguaggio HTML, possibile utilizzare quasi tutti gli elementi HTML standard ad eccezione
dell'elemento <script>, vietato al fine di eliminare rischi di attacchi con iniezione di codice, e degli elementi <html> <body> e <base>, i quali
sarebbero di poca utilità
Binding mediante interpolazione di stringhe

➢ Forma più semplice di data binding, con sintassi del tipo:

<p>Esempio interpolazione {{ TemplateExpression }}</p>

➢ L'espressione tra doppie parentesi graffe, detta Template

Expression, è elaborata da Angular e convertita in una stringa

➢ Template Expression solitamente costituita dal solo nome di una

proprietà definita nella classe del relativo componente, ma che
può contenere anche altri tipi di espressioni Javascript
Esempio

➢ In tal caso, all'interno del template (definito nell’oggetto del

decoratore @componet, ma discorso equivalente nel caso di utilizzo
del file esterno app.component.html), possibile l’accesso alla
proprietà title del componente AppComponent, mediante
l’invocazione del metodo pubblico getTitle() attraverso la rispettiva
Template Expression

➢ Di conseguenza, ad ogni variazione della proprietà "title", Angular

provvede ad aggiornare automaticamente il template, in modo da
rispecchiare le modifiche apportate al componente
Esempio

NOTA: Sebbene possibile l’utilizzo di Template Expression anche

abbastanza complesse, consigliato l’utilizzo di espressioni semplici e
facilmente leggibili, che possano essere valutate da Angular in breve tempo
al fine di non causare rallentamenti dell'applicazione

NOTA: Non tutte le espressioni consentite all’interno di una Template

Expression, ad esempio non ammesse quelle contenenti

❏ operatori di assegnamento (=, +=, ...)

❏ operatori di incremento e decremento ( num++, num--)
❏ operatore new per la creazione di una nuova istanza
Property Binding

➢ Il Property Binding (binding delle proprietà) permette di

assegnare ad una proprietà di un elemento, detta Target
Property, il valore di un'espressione valutata da Angular

➢ Property Binding, chiamato anche One-Way Data Binding,

evidenziando in tal modo come le informazioni siano inviate in
modo unidirezionale dal codice TypeScript del componente, ad
una specifica proprietà di un elemento del Template HTML del
componente

NOTA: Il Property Binding ha che fare esclusivamente con le proprietà di un

elemento del DOM e non con gli attributi definiti dal codice HTML
Esempio

1. Creazione del componente DescrizioneAutoComponent mediante Angular CLI

2. Definizione del componente all’interno del file
descrizione-auto.component.ts