Nell'esercizio precedente,
abbiamo impalcato la nostra prima applicazione angolare di base.
Come ho detto, lavoreremo su quell'applicazione Angular e la svilupperemo
ulteriormente durante il resto di questo corso.
Ora, prima di iniziare a lavorare sulla nostra applicazione Angular,
configuriamo la nostra applicazione Angular per utilizzare alcuni moduli aggiuntivi,
che ci permettono di progettare i modelli per la nostra applicazione Angular.
Faremo uso del modulo Angular Material per la progettazione dei layout dell'interfaccia utente.
Il modulo Materiale angolare ci fornisce una serie di componenti di layout interessanti
che possiamo utilizzare nella progettazione dei nostri modelli di componenti angolari.
Inoltre, faremo uso del layout flessibile che si basa sul layout flessibile CSS,
che ci permette di fare design reattivo all'interno della nostra applicazione Angular.
Quindi, in questo esercizio,
faremo queste configurazioni.
Lungo il percorso, impareremo la nostra prima breve conoscenza dei componenti,
anche prima di procedere ad esaminare i componenti in modo più dettagliato nella prossima lezione.
Per iniziare, iniziamo il nostro viaggio con una rapida visita al file app.component.ts.
Questo è il file che supporta
il componente radice che fa parte della nostra applicazione Angular.
Ora, dando un'occhiata a questo componente radice,
ci sono alcune cose che ti diventeranno molto chiare anche senza molte spiegazioni.
La prima cosa su cui vorrei attirare la vostra attenzione è questa dichiarazione di importazione.
Come puoi vedere, questo sta importando la classe dei componenti dalla libreria core angolare.
Poi in seguito, stiamo preparando la nostra classe AppComponent qui,
ed esportando quella classe.
Così, all'interno di questa classe AppComponent che
abbiamo dichiarato, abbiamo una variabile che abbiamo dichiarato qui chiamato titolo,
che è attualmente assegnato come una stringa.
Ora, dando una rapida occhiata a questa variabile,
si inizia immediatamente a chiedersi,
come è legato a ciò che abbiamo visto nel browser,
quando hai visto la nostra applicazione Angular essere mostrata nel browser,
l'applicazione Angular stava visualizzando esattamente queste parole nel browser.
In effetti, questa variabile gioca un ruolo importante nel
venire con la vista che hai visto nel nostro browser.
Ora, inoltre, vedi anche che
questa classe di componenti è aggiunta con un decoratore qui.
Quindi, ancora una volta, questo è un altro decoratore che incontrerai in Angular.
Quindi, questo come vediamo è un decoratore di componenti.
Il decoratore del componente prende internamente un oggetto JavaScript come parametro qui,
e la prima proprietà che vedi qui chiamata selettore: app-root.
Ora, se vi ricordate quando abbiamo guardato il file index.HTML,
abbiamo visto che abbiamo incluso un elemento lì chiamato app-root.
Ora, si inizia a vedere da dove nasce l'app root.
Quindi, questo è il selettore per il componente che dichiariamo qui,
che è ciò che viene utilizzato all'interno della nostra classe template per specificare dove
la vista corrispondente a questo componente deve essere visualizzata nel browser.
La seconda proprietà che definisci qui è il TemplateUrl.
Questo punta a un file,
un file HTML come potete vedere,
che contiene il modello corrispondente a questo particolare componente.
Il modello che definisce la vista per questo componente.
La terza proprietà che definisci qui come puoi vedere, dice, styleUrls,
che come noti qui è assegnata al file app.component.scss.
Quindi, questo file dovrebbe contenere tutto il codice scss che può essere
utilizzato per lo stile CSS per il nostro modello di componenti.
Quindi, questa è una rapida visita al file app.component.ts.
Ora, andiamo al file App.component.html
e diamo una rapida occhiata al modello.
Vai nel file App.component.html,
vedi che questo file app.component,
il codice HTML qui contiene solo un tag h1 con qualcosa qui con una doppia parentesi graffe.
Ora, ovviamente, questo non è qualcosa a cui sei abituato dalla tua conoscenza di HTML,
CSS o JavaScript che hai visto prima.
Questa è la sintassi angolare.
Questo è ciò che chiamiamo interpolazione.
Questo sta usando l'associazione dati unidirezionale di Angular.
Ti sto lanciando un paio di termini in questo momento.
Attenersi a questi termini torneremo per esaminare questi termini in
modo più dettagliato nelle restanti lezioni di questo corso.
La prima cosa come ho detto è l'interpolazione,
la seconda che ho menzionato è il binding unidirezionale dei dati.
Inoltre, si vede immediatamente che questa è la variabile che hai visto nel compagno, il
file TypeScript, che definisce il codice TypeScript corrispondente al componente App.
Quindi, una volta specificato qualcosa di simile qui,
l'implicazione è che qualunque sia il valore per questo titolo verrà sostituito
qui e verrà utilizzato come codice HTML interno per questo tag h1 qui.
Questo è lo scopo di includere questo qui.
Ora andremo a installare alcuni
degli altri moduli di relazione angolari che ci permetteranno di progettare modelli.
Poi torneremo a questo file App.component.html.
Quindi riprogettare questo modello un po' più avanti in questo esercizio.
Al fine di aiutarci a progettare viste reattive all'interno della nostra applicazione angolare,
ci accingiamo a prendere l'aiuto di un paio di
moduli correlati per Angular chiamato come modulo materiale angolare.
Il modulo Angular Material ci fornisce una serie di componenti.
Componenti di layout che possiamo utilizzare per progettare
i nostri nuovi modelli per i nostri componenti angolari.
Il modulo Angular Material se si desidera confrontare questo è un po 'come quello che Bootstrap
ci ha fornito per progettare le nostre pagine web che abbiamo esaminato nel corso precedente.
Inoltre, userò un altro modulo chiamato come modulo di layout angolare flex.
Il modulo di layout flessibile fornisce supporto per l'utilizzo del
layout flessibile CSS all'interno dei nostri modelli angolari per i nostri componenti angolari.
Ora, questi due moduli devono essere esplicitamente
installati e quindi importati nella nostra applicazione Angular,
questo è quello che faremo nel prossimo passaggio.
Ma prima di andare avanti,
una domanda che potresti chiederti è,
perché non usare Bootstrap per fare la progettazione dei modelli per la nostra applicazione Angular?
Infatti, puoi anche usare Bootstrap per progettare i modelli per la nostra applicazione Angular.
Ma puoi usare solo la
parte dei componenti CSS di Bootstrap all'interno dell'applicazione Angular.
I componenti basati su jQuery.
I componenti JavaScript non possono essere utilizzati esplicitamente potrebbero esserci alcuni conflitti
tra i componenti basati su jQuery di Bootstrap e il codice angolare stesso.
Quindi, è meglio evitare di utilizzare i componenti JavaScript di Bootstrap
nel caso in cui si scelga di utilizzare Bootstrap come modo per progettare i modelli angolari.
Ma d'altra parte,
ho anche pensato che questo ci avrebbe fornito una buona opportunità di imparare ottenere un
altro framework di layout dell'interfaccia utente che è il framework materiale angolare.
Quindi, questo è il motivo per cui ho scelto di utilizzare il framework materiale angolare
e il layout flessibile angolare in questo particolare corso.
Ora, mentre passiamo attraverso il resto di questo corso,
non spiegherò esplicitamente come usare
i componenti del materiale angolare o come usare il layout flessibile angolare.
Invece, li impareremo guardando esempi.
Useremo questi due
componenti, sia il materiale angolare che il supporto Angular Flex-Layout,
quando progettiamo i nostri modelli per i nostri componenti angolari in questo particolare corso.
Quindi, con il processo di utilizzo di questi componenti
,
imparerai anche lungo la strada come utilizzare sia il materiale angolare che
il layout flessibile angolare all'interno dell'applicazione angolare.
Ho pensato che facendo gli esercizi,
avresti imparato molto di più su Angular Material.
Ora, per spiegare gli aspetti concettuali del perché
i componenti Angular Material funzionano come funzionano, o come funziona Grid, ad esempio,
o come funziona un design reattivo,
ne abbiamo già esaminato alcuni nel corso precedente su Bootstrap.
Quindi, anche gli stessi concetti verranno in nostro aiuto.
Invece, esamineremo la meccanica di utilizzare sia il materiale angolare che
il layout angolare flessibile all'interno della nostra applicazione angolare in questo particolare corso.
Per iniziare a utilizzare un materiale angolare,
ovviamente la prima cosa che devi fare è installare il modulo Materiale angolare.
Quindi, al prompt digitare npm install —save @angular /material.
Quindi, come puoi vedere,
specifichiamo tutti i moduli angolari correlati con @angular,
quindi vedrai anche la stessa cosa per il Flex-Layout.
Stiamo installando la versione 6.4.7 del modulo Angular Material.
Inoltre, il modulo materiale richiede l'installazione di CDK.
Quindi, lo installeremo anche facendo
npm install @angular /cdk @6 .4.7 —save,
e installarlo insieme ad Angular Material.
Quindi, Angular Material fa uso del cdk angolare per i suoi componenti.
Inoltre, quando si utilizza Materiale angolare,
è necessario importare anche il modulo di animazioni angolari nell'applicazione Angular.
A partire dalla versione angolare quattro,
il supporto
di animazione angolare è stato estratto dai moduli core nel proprio modulo separato.
Quindi, il che significa che se è necessario
fare uso di animazioni all'interno dell'applicazione Angular,
è necessario installare esplicitamente il modulo di animazioni Angular.
Quindi, andiamo avanti e installiamo anche questo.
Quindi, dirai
npm install —save @angular /animations @6 .1.7.
Inoltre, un altro modulo che installerò
insieme si chiama HammerJS.
Il modulo HammerJS viene utilizzato da Angular
per supportare alcuni gesti all'interno dell'applicazione Angular.
Quindi, questo è il motivo per cui installiamo HammerJS anche all'interno della nostra applicazione,
e la versione corrente di HammerJS che stiamo usando è 2.0.8.
Ora, abbiamo installato tutto ciò di cui abbiamo bisogno
per il modulo materiale angolare da utilizzare all'interno della nostra applicazione angolare.
Successivamente, passerò all'installazione di
Angular Flex-Layout all'interno della mia applicazione Angular.
Quindi, per farlo, ho tamponato il prompt
npm install —save @angular/flex-layout
e installeremo l'ultima versione di questo.
Quindi, ora che abbiamo tutti i pezzi di cui abbiamo bisogno per la nostra applicazione angolare installata,
andiamo avanti e quindi configurare la nostra applicazione angolare per fare
uso di questi nuovi moduli che abbiamo installato nella nostra applicazione angolare.
La prima cosa che faremo è andare al file index.HTML,
e quindi configureremo il file index.HTML per utilizzare le icone del materiale angolare.
Quindi, per includere le icone Angular Material in modo che possano essere
utilizzate all'interno dei modelli della tua applicazione Angular, quindi,
lasciami andare lì nella testa di index.HTML,
e quindi creare un nuovo link con
href=» https://fonts.googleapis.com/icon?family=Material+Icons "e questo è uno stile foglio.
Quindi, con questo, ora posso fare uso delle icone del materiale angolare all'interno della
mia applicazione angolare ovunque scelgo di farlo all'interno dei modelli.
Il passo successivo è quello di andare all'app module.ts e
quindi importare i tre moduli che abbiamo appena installato.
Quindi, il primo che sto andando a importare è chiamato come
BrowserAnimationsModule che importerò da
@angular /platform-browser/animations. Quindi, ora il prossimo
che ho intenzione di importare è MaterialToolbarModule.
Quindi, questo importa il modulo @angular /material/toolbar
che può essere utilizzato all'interno dei nostri modelli di applicazioni angolari.
Quindi, Angular Material, e importa anche
il FlexLayoutModule da @angular /flex-layout.
Quindi, una volta importati tutti questi moduli, una modifica aggiuntiva che devo
fare è- oh lasciami importare anche Hammer.JS mentre sono proprio lì.
Quindi, lasciami importare
Hammer.JS nella mia applicazione.
E una volta che ci sono,
l'altro cambiamento che devo fare è includere anche
quei moduli negli ingressi del decoratore del modulo NG qui.
Quindi, andrò lì e dirò modulo browser, modulo di
animazioni del browser lì e poi dopo il modulo HTTP,
importerò il modulo della barra degli strumenti del materiale e anche il
modulo di layout flessibile come parte degli input all'interno del decoratore del modulo NG per il mio modulo app.
Quindi, con questo tutte le mie configurazioni per utilizzare il modulo della barra degli strumenti del materiale e
il modulo di layout flessibile angolare e insieme
al modulo di animazioni in angolare è completato.
Ora entriamo nel modello dei componenti e facciamo uso del
nostro primo componente materiale angolare nella progettazione del layout
per il nostro componente app applicazioni.
Andando al file modello dei componenti dell'app,
ho intenzione di sostituirlo ora con
un componente materiale angolare
chiamato come mat-toolbar.
Quindi, la barra degli strumenti del tappetino mi consente di progettare
una barra degli strumenti che posso usare nella mia applicazione angolare.
Barra degli strumenti in genere visualizzata nella parte superiore della pagina all'interno dell'applicazione.
Quindi, per questa barra degli strumenti specificherò il colore come primario.
Vedremo cosa significa in breve tempo.
E anche chiuderemo questa barra degli strumenti MD qui.
Ora all'interno di questo ho intenzione di utilizzare uno span con
il nome del mio ristorante per il quale sto progettando questo sito web.
Allora, Ristorante Con Fusion.
Ora capisci perché ho chiamato questa cartella come Confusione.
Quindi, qual è l'aggiornamento che dobbiamo fare al file HTML del componente app.
Mentre ci siamo, includeremo anche alcuni aggiornamenti SCSS al mio file Styles.scss.
Quindi, se vai giù nel tuo codice qui,
troverai questo file styles.scss qui.
Quindi, questo è dove è possibile includere tutti gli stili globali in
questo file e questo sarà disponibile per tutti i componenti di fare uso di.
Ogni componente ha i propri file SCSS in cui è possibile includere
la personalizzazione a livello di componente o il
codice SCSS a livello di componente da utilizzare all'interno di tale componente specifico.
Useremo entrambi gli approcci all'interno di
questa applicazione angolare che stiamo sviluppando in questo corso.
Ma in questo momento aggiornerò il
file styles.scss principale con un codice che sarà utile per la mia intera applicazione angolare.
La prima cosa che ho intenzione di fare,
è importare un tema precostruito che è disponibile attraverso materiale angolare.
Questo tema precostruito in materiale angolare ci fornisce un modo per specificare
determinati colori e il modo in cui alcune cose sono
disposte all'interno dei miei componenti di materiale angolare.
I colori che saranno disponibili attraverso la cornice precostruita il nostro colore primario,
il colore accento, e il colore di avvertimento.
Ora il tema specifico che userò è chiamato viola profondo.
Quindi, in questo caso il colore primario sarà viola profondo.
Il colore dell'accento sarà ambra e il colore di avvertimento sarà rosso in questo caso.
Ora puoi costruire i tuoi temi materiali angolari che
puoi usare all'interno della tua applicazione, ma lo
lascerò come un esercizio per te da esplorare da solo.
In questo momento all'interno della mia applicazione angolare userò una
delle cose precostruite chiamate ambra viola profonda.
Quindi, per farlo andando al file Styles.scss,
importerò
temi precostruiti in materiale angolare profondo amber.CSS viola.
Quindi, questo tema precostruito userò all'interno della mia applicazione angolare.
Vedrai presto come funziona questo tema precostruito
nell'applicazione angolare nei modelli che abbiamo progettato per la nostra applicazione angolare.
Inoltre, ho intenzione di configurare alcune proprietà per il
mio corpo della pagina index.HTML in modo da specificare il padding come zero,
margine come zero, e quindi la famiglia di caratteri che
userò è rubato o sans serif all'interno della mia applicazione.
Puoi scegliere di usare quello che vuoi all'interno delle tue applicazioni angolari.
Ho scelto di utilizzare questi due all'interno della mia applicazione angolare.
Salviamo le modifiche
e andiamo a dare un'occhiata veloce alla nostra applicazione angolare nel browser.
Prima di farlo,
assicurarsi che il servizio NG sia in esecuzione in
una delle finestre del terminale del computer.
Il server di sviluppo dovrebbe essere continuamente in esecuzione in modo che eseguirà automaticamente la
decompilazione e quindi caricare
la versione aggiornata dell'applicazione angolare nella finestra del browser.
Andando al browser,
ora vedi le modifiche che abbiamo apportato
all'applicazione angolare riflesse nella vista nel
mio browser in modo da poter vedere che ora abbiamo una barra degli strumenti in alto con
le parole che abbiamo incluso nel file modello componenti app lì.
E si può vedere il colore che è stato applicato alla barra degli strumenti.
Quindi il colore, il colore primario,
quindi questo è il colore viola profondo che viene applicato alla barra degli strumenti.
Ora il tema che abbiamo definito aggiungerà colore viola scuro o ambra,
a seconda di ciò che viene utilizzato dai componenti specifici del materiale angolare
che usiamo all'interno dei nostri modelli di applicazioni angolari.
Con questo completiamo questo esercizio.
In questo esercizio, abbiamo configurato la nostra applicazione angolare per
utilizzare il materiale angolare e il layout flessibile angolare.
Abbiamo anche fatto uso del
nostro primo componente materiale angolare nel file modello dei componenti dell'app.
E abbiamo usato il tema incorporato dal materiale angolare per la nostra applicazione angolare.
Salva tutte le modifiche e quindi questo è un buon momento per
fare un commit git con il messaggio che configura angolare.