Angular 7 [PDF]

Zitiervorschau

---

Angular 7

INDICE 1.

2.

Angular CLI (Command Line Interface) 1.1. 1.2.

Installazione Generazione nuovo Workspace

1.3. 1.4.

Analisi struttura iniziale Workspace Estensione struttura iniziale Workspace

First Angular app 2.1. 2.2. 2.3. 2.4.

3.

Componenti 3.1.

4.

Avvio app Analisi file index.html Analisi file app.component.ts Analisi file app.component.html

Creazione manuale e analisi di un Componente

Data Binding 4.1. 4.2.

Binding mediante interpolazione di stringhe 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

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

Modalità Interattiva

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 .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 (o in forma abbreviata ng g ) Con l’elemento necessario per definire i file che devono essere aggiunti o modificati nel progetto. Ad esempio: ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏

Nuovo componente ng generate component Nuova direttiva ng generate directive Nuovo servizio ng generate service Nuovo modulo ng generate module Nuova pipe ng generate pipe Nuova classe ng generate class Nuova interfaccia ng generate interface Nuova applicazione ng generate app

➢

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 , 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 o 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

NOTA: Dall’analisi del codice sorgente della pagina HTML, possibile notare come Angular CLI abbia inserito 5 elementi , 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 , del frammento di codice, è inserito come diretto discendente dell'elemento 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 , Angular applicherà tali dichiarazioni solo agli elementi presenti nel template del componente EsempioComponenteComponent, a tal fine Angular modifica i selettori delle regole aggiungendo un attributo univoco all'elemento , 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 , vietato al fine di eliminare rischi di attacchi con iniezione di codice, e degli elementi e , i quali sarebbero di poca utilità

Binding mediante interpolazione di stringhe ➢

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

Esempio interpolazione {{ TemplateExpression }}

➢

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