29 1 1MB
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 }}