[MUSIC]
Nous venons de créer notre première application Angular dans l'exercice précédent.
Vous devez vous demander, à quoi ressemble une application Angular typique ?
Quelle est sa structure et son architecture, et
comment construire une application Angular ?
Parlons pas à pas de ces choses, en commençant par cette conférence.
Jetez un coup d'œil au dossier de l'application, dans un éditeur.
Vous remarquez immédiatement que l'Angular CLI a créé tout un tas de fichiers
dans différents dossiers de notre application.
Que contiennent ces fichiers ?
Comment constituent-ils une application Angular ?
Examinons-les étape par étape pour comprendre l'architecture typique de
une application Angular.
Comme nous l'avons déjà réalisé,
applications angulaires sont construites comme une combinaison
de HTML et soit TypeScript ou JavaScript.
Dans ce cours, nous allons utiliser TypeScript comme langue de choix pour
construire notre application Angular.
Angular lui-même se compose de plusieurs bibliothèques,
certaines d'entre elles appelées bibliothèques et d'autres sont des bibliothèques optionnelles.
Selon le type d'application Angular que vous essayez de construire,
vous en inclurez quelques-unes dans votre application.
Comme nous l'avons déjà appris, Angular est un framework JavaScript et
nous allons tirer parti de cela pour construire notre application.
Pour résumer, l'application Angular est modulaire dans sa nature et se compose de
plusieurs composants, ainsi que leurs modèles, qui composent l'application.
Non seulement cela, ces composants, et d'autres parties de l'application Angular, comme les services
, seront organisés en modules.
Et ces modules, à leur tour, seront utilisés par des modules de niveau supérieur.
Ainsi, vous pouvez regarder une application Angular étant une architecture
modulaire avec un module racine en haut,
qui prend l'aide d'autres modules organisés dans votre hiérarchie de modélisation.
Examinons notre application pour comprendre comment cela est créé.
Avant de procéder, le module racine par défaut
dans Angular est généralement nommé le module d'application.
En allant à notre code, commençons notre voyage et index.html.
Donc, dans ce fichier index.html, vous pouvez voir que nous avons le code html typique ici,
avec cette ligne particulière qui dit app-root.
Vous les reconnaissez immédiatement cela ne ressemble pas à une balise HTML typique.
Alors commençons par nous poser la question, qu'est-ce que cela signifie, et
pourquoi cela est-il inclus dans la page index.html ?
Comme nous l'avons déjà vu, une application Angular typique
est une hiérarchie de modules avec un module racine.
Votre application Angular est amorcée en amorçant le module racine
pour démarrer votre application.
Alors, comment bootstrap une application Angular ?
Nous avons déjà vu la page index.html, et vous y avez vu un élément appelé app-root.
Alors posons-nous encore quelques questions.
Un compagnon de la page index.html est le fichier main.ts.
Si vous ouvrez ce fichier, vous verrez qu'il contient un ensemble
d'instructions d'importation dans TypeScript, comme écrit ici.
Ne nous plonçons pas trop dans les détails, mais
Je reviendrai expliquer cela dans un court moment.
Mais en particulier,
permettez-moi d'attirer votre attention sur cette ligne particulière dans le fichier main.ts.
Qui dit PlatformBrowserDynamic () .bootstrapModule
, puis notez le paramètre ici, qui dit (AppModule).
Donc, comme je l'ai mentionné, plus tôt le module d'application est le nom
typique donné au module racine dans une application Angular.
Si vous regardez la hiérarchie des fichiers,
vous voyez déjà un fichier appelé app_module.ts.
Nous allons visiter ce fichier dans un court moment pour voir ce qu'il contient.
Maintenant, revenant à ces importations,
vous pouvez voir que prenons l'exemple de la première importation ici.
Il est dit d'importer EnableProdMode à partir de '@angular /core'.
Donc, ce que cela spécifie est que nous allons importer ce module
particulier de la bibliothèque angulaire.
Et de même, vous voyez le second disant importer PlatformBrowserDynamic
de '@angular /platform-browser-dynamic'.
Donc, à partir de cette bibliothèque, vous importez ce module en place.
Maintenant, le module PlatformBrowserDynamic vous permet de bootstrap
votre application Angular en prenant votre module racine comme paramètre.
Évidemment, il y a beaucoup d'autres fichiers dans ce dossier et les sous-dossiers là-bas.
Ne nous préoccupons pas trop d'eux pour le moment.
Nous allons en apprendre davantage sur certains au cours de ce cours.
Maintenant, Angular CLI aide à créer cette hiérarchie de dossiers et de fichiers
, avec les paramètres nécessaires pour
, vous pouvez démarrer votre application angulaire et commencer.
Faire cela à la main est une tâche un peu fastidieuse.
Ainsi, l'Angular CLI simplifie la préparation
du dossier pour votre application Angular.
Encore une fois, allez dans le fichier app_module.ts.
Comme je l'ai mentionné, c'est le module racine pour votre application Angular.
Maintenant typiquement, le module racine serait nommé comme fichier app.module,
mais ce n'est qu'un nom suggéré dans Angular.
Vous verrez que beaucoup de fichiers qui constituent une application Angular,
il y a des façons suggérées de nommer ces fichiers.
Au cours du cours, nous apprendrons spécifiquement sur chacun de ces fichiers
.
Donc, en regardant le contenu de app_module.ts,
à l'intérieur, vous voyez un ensemble d'instructions d'importation là-bas.
En les regardant rapidement, il est dit d'importer {browserModule} à partir de
'@angular -platform-browser'.
Importer {ngModule} depuis '@angular /core'.
Et ngModule est un module angulaire.
Nous en apprendrons un peu plus tard.
De plus, vous voyez ici une autre instruction import,
qui dit import {appComponent} from './app.component '.
Et en regardant les fichiers ici,
vous voyez déjà un app.component.tsfileware, et
puis plusieurs autres fichiers ici, y compris une app.component card.html,
un app.component.acss, et d'autres fichiers.
Maintenant, cette instruction spécifie que ce module racine inclura ce composant,
et formera le compliment racine de votre application Angular.
Une application Angular typique, comme nous l'avons vu, se compose d'un certain nombre de modules
avec le module racine comme module primaire,
qui vous aide à bootstrap votre application Angular.
Le module racine est un module angulaire avec une entité, ou est une classe.
C'est donc là que vous voyez l'utilisation d'une classe TypeScript ici,
donc si vous descendez dans le module rouge ci-dessous, vous verrez
cette instruction appelée classe d'exportation AppModule.
TypeScript ajoute des classes à votre code JavaScript typique.
Si vous êtes familier avec seulement ES-5 JavaScript,
alors les classes n'y ont pas encore été introduites, mais
les nouvelles versions de JavaScript introduiront le support des classes.
TypeScript prend également en charge les classes.
Donc, si vous avez de l'expérience avec la programmation orientée objet,
vous êtes déjà familier avec les classes.
Donc, ce genre d'approche est introduit dans JavaScript avec l'introduction
des classes dans TypeScript et les futures versions de JavaScript.
De plus, vous remarquerez que cette classe a
un décorateur Ngmodule associé à cela.
Donc, un décorateur est, encore une fois, une fonction de
qui modifie les classes JavaScript.
Nous verrons l'utilisation de décorateurs dans de nombreux endroits dans notre application Angular.
Ceci est un Ngmodule.
Le décorateur de cela vous permet de spécifier quelques détails sur ce module d'application
.
Donc, cette fonction de décorateur prend un certain ensemble
de métadonnées pour vous aider à décrire ce module.
Donc, cet objet de métadonnées contient ici, comme vous pouvez le voir, des déclarations
, des importations, des fournisseurs, des bootstrap.
Et contiendra également des exportations si ce module exporte quelque chose qui peut être
utilisé par un autre module.
Comme il se trouve que c'est le module racine, nous n'avons pas d'exportation à partir de ce module.
Donc, au lieu de cela, nous n'avons que des déclarations, des importations, des fournisseurs et des bootstrap.
Donc ici celui-ci est assez simple à comprendre.
Il spécifie que pour bootstrap cette application Angular,
nous devons bootstrap le AppComponent.
Donc, AppComponent est le composant racine de notre application Angular.
De plus, la partie import spécifie les propriétés,
voyant tous ces modules doivent être importés pour être utilisés avec ce module app.
Donc, ce module d'application dépend maintenant de ces autres modules.
Donc ce sont les modules qui vont être importés dans le module d'application en tant que partie
de la hiérarchie, d'où la raison pour laquelle nous avons importé ces modules ici.
Donc, lorsque vous importez les modules,
vous spécifiez ici que le module d'application utilisera ce module.
Donc, la propriété import spécifie les modules qui doivent être importés ou
les modules dont ce module particulier dépend.
Les déclarations ici, la propriété des déclarations,
est la propriété qui déclare les classes de vue
qui appartiennent à ce module particulier.
Ainsi, les classes de vue dans le cas d'un module Angular seraient
sous la forme de composants, de directives et de tuyaux.
Nous allons parler de directives et de tuyaux un peu plus tard dans ce cours,
nous parlerons des composants dans la prochaine leçon.
Les fournisseurs spécifient tous les services dont ce module
fera usage.
Services dont nous parlerons un peu plus en détail dans
le module de la semaine prochaine.
Nous parlerons plus de détails sur les services, comment nous les créons,
et comment nous pouvons les utiliser avec notre application Angular.
Pour résumer ce que nous avons appris jusqu'à présent, nous réalisons qu'un module
dans une application Angular pourrait consister en un ensemble de composants et
services qui seront requis de ce module en les important.
Et ceux-ci seront déclarés en utilisant la propriété de déclarations
du décorateur Ngmodule dans notre module d'application.
Maintenant, ces composants eux-mêmes peuvent dépendre de
d'autres composants, ou services, ou directives, ou des pipes
, comme nous le verrons dans le reste de ce cours particulier.
Donc, avec cela, nous avons une idée approximative de la façon dont une application Angular typique est structurée.
En revenant à notre code, il est maintenant temps d'examiner
ce fichier app.component.ts, et le fichier app.component.html.
qui déclare le modèle pour notre composant,
et le fichier app.component.ts,
qui spécifie la partie TypeScript de notre composant.
Maintenant, nous allons le faire dans la prochaine leçon, où nous allons traiter des composants et
comment nous pouvons créer de nouveaux composants et les ajouter à notre application Angular.
[MUSIQUE]