[MUSIC]
Abbiamo appena creato la nostra prima applicazione Angular nell'esercizio precedente.
Ti starai chiedendo, che aspetto ha una tipica applicazione Angular?
Qual è la sua struttura e architettura e
come costruiamo un'applicazione angolare?
Parliamo di queste cose passo dopo passo, iniziando con questa lezione.
Dando una rapida occhiata alla cartella dell'applicazione, in un editor.
Si nota immediatamente che la CLI Angular ha creato un sacco di
file in varie cartelle nella nostra applicazione.
Cosa contengono questi file?
Come costituiscono un'applicazione angolare?
Esaminiamo passo dopo passo per capire l'architettura tipica di
un'applicazione angolare.
Come abbiamo già capito,
le applicazioni angolari sono costruite come una combinazione
di HTML e dattiloscritto o JavaScript.
In questo corso useremo TypeScript come linguaggio di scelta per
costruire la nostra applicazione Angular.
Angular stesso è costituito da diverse librerie,
alcune delle quali chiamate librerie e altre sono librerie opzionali.
A seconda del tipo di applicazione Angular che stai cercando di creare,
ne includerai alcuni nella tua applicazione.
Come abbiamo già imparato, Angular è un framework JavaScript e
lo sfrutteremo per costruire la nostra applicazione.
Per riassumere, Applicazione angolare è modulare nella sua natura e sarà costituito da
diversi componenti, insieme ai loro modelli, che compongono l'applicazione.
Non solo, questi componenti e altre parti dell'applicazione Angular,
come i servizi, saranno organizzati in moduli.
E questi moduli, a loro volta, saranno utilizzati da moduli di livello superiore.
Quindi puoi guardare un'applicazione angolare che è un'
architettura modulare con un modulo radice nella parte superiore,
che prende l'aiuto di altri moduli organizzati nella tua gerarchia di modellazione.
Esaminiamo la nostra applicazione per capire come questo viene creato.
Prima di procedere, il modulo radice per impostazione predefinita
in Angular è in genere chiamato il modulo app.
Andando al nostro codice, iniziamo il nostro viaggio e index.html.
Quindi in questo file index.html, puoi vedere che abbiamo il tipico codice html qui,
insieme a questa particolare riga che dice app-root.
Li riconosci immediatamente questo non sembra un tipico tag HTML.
Quindi iniziamo ponendoci la domanda, cosa significa questo e
perché è incluso nella pagina index.html?
Come abbiamo già visto, una tipica applicazione angolare
è una gerarchia di moduli con un modulo radice.
L' applicazione Angular viene bootstrap eseguendo il bootstrap del modulo root
per avviare l'applicazione.
Quindi, come eseguiamo il bootstrap di un'applicazione angolare?
Abbiamo già visto la pagina index.html e hai visto un elemento chiamato app-root.
Quindi facciamoci qualche altra domanda.
Un compagno alla pagina index.html è il file main.ts.
Se apri quel file vedrai che contiene un insieme
di istruzioni di importazione in TypeScript, come scritto qui.
Non approfondiamo troppo i dettagli, ma
tornerò a spiegarlo tra poco.
Ma in particolare,
permettetemi di attirare la vostra attenzione su questa particolare riga nel file main.ts.
Che dice PlatformBrowserDynamic () .BootStrapModule
e quindi nota il parametro qui, che dice (AppModule).
Quindi, come ho detto, in precedenza il modulo app è il
nome tipico dato al modulo radice in un'applicazione Angular.
Se si guarda la gerarchia dei file,
si vede già un file chiamato app_module.ts.
Andremo a visitare quel file tra poco per vedere cosa contiene.
Ora, tornando a queste importazioni,
potete vedere che prendiamo l'esempio della prima importazione qui.
Dice importare EnablePRODMode da '@angular /core'.
Quindi ciò che questo specifica è che importeremo questo particolare
modulo dalla libreria nucleo angolare.
E allo stesso modo, vedi il secondo che dice import PlatformBrowserDynamic
da «@angular /platform-browser-dynamic».
Quindi da questa libreria stai importando questo modulo in posizione.
Ora, il modulo PlatformBrowserDynamic consente di avviare
l'applicazione Angular prendendo il modulo root come parametro.
Ovviamente ci sono molti altri file in questa cartella e le sottocartelle lì.
Non preoccupatevi troppo di loro al momento.
Impareremo a conoscere alcuni di loro mentre andiamo avanti in questo corso.
Ora, Angular CLI aiuta a creare questa gerarchia di cartelle e
file, con le impostazioni necessarie
per essere in grado di avviare l'applicazione angolare e iniziare.
Fare questo a mano è un compito un po 'noioso.
Quindi, la CLI angolare semplifica la preparazione
della cartella per l'applicazione Angular.
Quindi di nuovo, andando al file app_module.ts.
Come ho detto, questo è il modulo radice per la tua applicazione Angular.
Ora in genere, il modulo radice sarebbe chiamato come file app.module,
ma questo è solo un nome suggerito in Angular.
Vedrai che molti dei file che costituiscono un'applicazione angolare,
ci sono modi suggeriti di nominare quei file.
Mentre passiamo attraverso il corso impareremo specificamente su ciascuno di questi
file.
Quindi, dando un'occhiata al contenuto di app_module.ts,
all'interno c'è una serie di istruzioni di importazione lì.
Dando una rapida occhiata a loro dice import {browserModule} da
'@angular -platform-browser'.
Importa {ngModule} da '@angular /core'.
E ngModule è un modulo angolare.
Impareremo un po' di più a riguardo poco dopo.
Inoltre, qui viene visualizzata un'altra istruzione import,
che dice import {appComponent} da '. /app.component '.
E dando un'occhiata ai file qui,
vedi già un app.component.tsfileware, e
poi molti altri file qui, tra cui un app.component card.html,
un app.component.acss e altri file.
Ora, questa affermazione specifica che questo modulo radice includerà questo componente,
e formerà il complimento radice della vostra applicazione angolare.
Una tipica applicazione angolare, come abbiamo visto, consiste in un numero di
moduli con il modulo radice come modulo primario,
che ti aiuta a bootstrap la tua applicazione angolare.
Il modulo radice è un modulo angolare con una funzione, o è una classe.
Quindi questo è dove si vede l'uso di una classe TypeScript qui,
quindi se si va giù nel modulo rosso qui sotto si vedrà
questa istruzione chiamata classe di esportazione AppModule.
TypeScript aggiunge classi al tuo tipico codice JavaScript.
Se hai familiarità con solo ES-5 JavaScript,
le classi non sono ancora state introdotte lì, ma
le versioni più recenti di JavaScript introdurranno il supporto per le classi.
TypeScript ha anche il supporto per le classi.
Quindi, se hai esperienza con la programmazione orientata agli oggetti,
hai già familiarità con le classi.
Quindi questo tipo di approccio viene portato in JavaScript con l'introduzione
di classi in TypeScript e versioni future di JavaScript.
Inoltre noterai che questa classe ha
un decoratore Ngmodule associato a quello.
Quindi un decoratore è, ancora una volta, una funzione di
che modifica le classi JavaScript.
Vedremo l'uso di decoratori in molti punti nella nostra applicazione angolare.
Questo è un Ngmodule.
Il decoratore di che consente di specificare alcuni dettagli su questo
modulo app.
Quindi questa funzione decoratore richiede un certo insieme
di metadati per aiutarti a descrivere questo modulo.
Quindi questo oggetto metadati contiene, come puoi vedere,
dichiarazioni, importazioni, provider, bootstrap.
E conterrà anche esportazioni se questo modulo sta esportando qualcosa che può essere
utilizzato da un altro modulo.
Dal momento che questo è il modulo principale, non abbiamo un'esportazione da questo modulo.
Quindi invece abbiamo solo dichiarazioni, importazioni, provider e bootstrap.
Quindi qui questo è abbastanza semplice da capire.
Specifica che per avviare questa applicazione angolare,
abbiamo bisogno di bootstrap l'AppComponent.
Quindi l'AppComponent è il componente principale della nostra applicazione angolare.
Inoltre, la parte di importazione specifica le proprietà,
visto che tutti questi moduli devono essere importati per essere utilizzati con questo modulo app.
Quindi questo modulo app ora dipende da questi altri moduli.
Quindi questi sono i moduli che verranno importati nel modulo app come
parte della gerarchia, da qui il motivo per cui abbiamo importato questi moduli qui.
Quindi, quando si importano i moduli,
si sta specificando qui dicendo che il modulo app farà uso di questo modulo.
Quindi la proprietà import specifica quei moduli che devono essere importati o
quei moduli da cui dipende questo particolare modulo.
Le dichiarazioni qui, la proprietà delle dichiarazioni,
è la proprietà che dichiara le classi di visualizzazione
che appartengono a questo particolare modulo.
Quindi le classi di visualizzazione in caso di un modulo Angular
sarebbero sotto forma di componenti, direttive e pipe.
Parleremo di direttive e pipe un po 'più tardi in questo corso,
parleremo dei componenti nella prossima lezione.
I provider specificano tutti i servizi che questo
particolare modulo farà uso di.
Servizi di cui parleremo in modo un po 'più dettagliato
nel modulo della prossima settimana.
Parleremo di più dettagli sui servizi, su come li creiamo
e su come possiamo farne uso con la nostra applicazione Angular.
Per riassumere ciò che abbiamo imparato finora, ci rendiamo conto che un modulo
in un'applicazione angolare potrebbe consistere in un insieme di componenti e
servizi che saranno richiesti da questo modulo importandoli.
E questi saranno dichiarati utilizzando la proprietà dichiarazioni
del decoratore Ngmodule nel nostro modulo app.
Ora, questi componenti stessi possono dipendere da
altri componenti, o servizi, o direttive, o
pipe, come vedremo nel resto di questo particolare corso.
Quindi con questo abbiamo un'idea approssimativa di come sia strutturata una tipica applicazione angolare.
Tornando al nostro codice, è ora il momento di esaminare
questo file app.component.ts e il file app.component.html.
Che dichiara il modello per il nostro componente,
e il file app.component.ts,
che specifica la parte TypeScript del nostro componente.
Ora, lo faremo nella prossima lezione, dove ci occuperemo di componenti e
come possiamo creare nuovi componenti e aggiungerli alla nostra applicazione angolare.
[ MUSIC]