Angular - 2-2 Comment une application angular est chargée et démarrer ?

Comment notre application Angular est chargée et démarrée ? Voici donc la page telle que nous la voyons en ce moment dans le projet que nous avons créé à la fin de la dernière section. Une page vide ici, Angular, The Complete Guide. Nous l'atteignons à localhost:4200. C'est là que notre serveur de développement hébergé par le CLI ou créé par le CLI hébergera notre application Angular.

Maintenant, le contenu que nous voyons ici peut être modifié en allant dans le fichier app.component.html de notre dossier app. Et ici, nous pouvons afficher un texte. On va mettre "Je suis dans l'appComponent !" ici dans une balise h3. Donc, si nous enregistrons ce fichier, nous le verrons ici et il aura automatiquement le style de texte bootstrap. Parce que nous avons ajouté bootstrap à la fin de la dernière section.

Mais alors que cela peut sembler évident que nous le voyons ici, c'est aussi un peu étrange. Comment notre navigateur ou le serveur hébergeant notre application sait-il qu'il doit rendre le contenu de l'app.component.html ici ? On pourrait dire que c'est le seul component que nous avons en ce moment et nous allons examiner de plus près le component bientôt. Mais ce n'est pas la raison. En réalité, ce n'est pas le fichier servi par le serveur. Au lieu de ça, c'est le fichier index.html qui est servi par le serveur.

Rappelez-vous que je vous ai dit qu'Angular est un framework qui vous permet de créer des applications à page unique. C'est la page unique qui est servie, le fichier index.html. Maintenant, si vous jetez un coup d'œil à ce fichier, nous voyons que c'est un fichier HTML normal. On définit le titre qu'on peut voir sur l'onglet du navigateur ici. Et le corps de ce fichier est très intéressant.

Ici, nous avons cette chose app-root avec loading.... entre les deux. Maintenant, il est clair que nous ne voyons pas loading... ici. Donc, ce fichier index.html semble avoir changé et c'est le cas. app-root ici n'est pas un élément HTML par défaut. C'est un de nos propres components. Nous allons bientôt nous plonger dans la création de nos propres components. Mais la CLI en a créé un pour nous : le component racine de notre application. Le component qui va lier toute notre application à la fin et tous les fichiers dans le dossier app ici qui ont "component" dans leur nom. Donc, ces fichiers sont liés à ce component. J'entrerai plus en détails sur ces fichiers dans l'un des prochains cours. Pour l'instant, regardons de plus près le fichier app.component.ts. Le fichier TypeScript ici.

Ici, vous pouvez voir que nous avons ce décorateur @component. Cela semble être important, mais plus important encore, pour l'instant, vous verrez que là, nous avons cette propriété selector qui assigne une chaîne comme valeur et cette chaîne contient app-root. Maintenant, c'est clairement le même texte que dans notre fichier index.html et c'est en fait l'information dont Angular avait besoin pour pouvoir remplacer cette partie ici dans ce fichier index.html avec le template de ce component. Le component ayant ce sélecteur et le template de ce component est simplement le contenu de ce fichier app.component.html.

Maintenant, tandis que je vais plonger ...

Plus profondément dans la façon de créer des composants et comment les configurer, voici ce qui se passe essentiellement au démarrage de notre application Angular. Bien que l'information manquante soit comment Angular est déclenché et comment il est lancé pour s'exécuter sur notre page HTML dans le fichier index.html. La réponse est dans le fichier final index.html qui est servi dans le navigateur et nous pouvons le vérifier en inspectant le code source. Nous avons quelques importations de scripts à la fin qui sont injectées automatiquement par la CLI, c'est pourquoi on ne les voit pas dans le fichier index.html brut. Cependant, quand le processus ng serve reconstruit notre projet, il crée des bundles de scripts JavaScript et ajoute automatiquement les bonnes importations dans le fichier index.html, une petite fonctionnalité pratique pour nous.

Dans le fichier final, ces importations de script sont présentes et contiennent également notre propre code. Ces fichiers de script sont donc exécutés et ils sont en fait le premier code à être exécuté. C'est quelque chose que vous devez garder à l'esprit, c'est le code que nous écrivons dans notre fichier main.ts. C'est pourquoi on l'appelle "main", c'est le premier code qui est exécuté. Regardons-le de plus près.

Ici, vous voyez que nous avons quelques importations, puis nous vérifions si nous sommes en mode production ou non. Pour désactiver certains messages d'avertissement, je peux vous le dire. Mais le plus important ici, c'est cette ligne, qui démarre notre application Angular en passant un module app à cette méthode. Le module app fait référence à un fichier qui contient une liste en gros de tous les composants qui devraient être connus d'Angular au moment où il analyse notre fichier index.html. Le cercle se referme ici, car nous référençons notre composant d'application.

Donc, Angular est démarré, ce fichier main.ts est démarré, on démarre une application Angular et on passe ce module en argument. Dans ce module, on dit à Angular qu'il y a ce composant d'application que vous connaissez quand vous essayez de vous lancer. Angular analyse maintenant le composant app, lit le set up qu'on passe ici et connaît donc ce sélecteur, app-root. Maintenant, Angular est capable de gérer app-root dans le fichier index.html et il sait que c'est le sélecteur que je connais, vous m'avez dit que je devrais le connaître parce qu'il était listé dans ce bootstrap array dans le module app de ce component.

Donc maintenant, Angular sait qu'ici je dois insérer le composant d'application et il se trouve que le composant d'application a un peu de code HTML, un modèle attaché à lui qui est cette balise h3. C'est ainsi que l'application Angular commence ici, c'est pourquoi nous voyons ce que nous voyons.

Maintenant que nous avons vu comment l'application Angular est démarrée, nous pouvons plonger plus profondément dans le fonctionnement des composants, ce qu'ils sont, comment nous pouvons créer nos propres composants et ce que fait ce module d'application en détail.