Bootstrapping dans Angular

Name: Bootstrapping dans Angular
Author: Michaela Ochnich

Ce chapitre explique comment le framework Angular démarre une application et la fait fonctionner dans le navigateur. Vous apprendrez comment Angular démarre automatiquement une application par défaut, ainsi que la façon de mettre en œuvre un démarrage manuel pour votre application.

Preview the first lesson free — get full access to all 3 lessons.

Demander une démo Se connecter

Cours : à la demande

Dans cette leçon, je vais vous présenter Processus d'amorçage d'application d'Angular. Le bootstrapping est le processus de lancement et le chargement de l'application dans le navigateur pour l'utilisateur Alors voilà j'ai une application de démarrage qui a été créé à l'aide de la CLI angulaire et il est actuellement en cours d'exécution et dans le navigateur ici, vous pouvez voir que le modèle de démarrage s'affiche. je clique sur inspecter, vous pouvez voir tous les éléments HTML du DOM et tout ce qui est rendu ici. Mais si vous affichez le fichier source à la place, vous verrez que c'est un fichier beaucoup plus court que cette page a commencé comme. Il y a quelques informations d'en-tête de base ici, puis cette racine d'application de sélecteur de composant unique. Il s'agit du composant racine de l'application. La plupart des applications angulaires ont un composant racine comme ceci, ce composant a alors des composants imbriqués, qui aura alors des composants imbriqués et dépendances qui leur sont propres, et tout cela construit un arbre de composants structurels qui constitue votre application Angular. Il y a aussi cinq fichiers JavaScript ici, il y a runtime, polyfills, styles, vendors et main. Runtime est un fichier Webpack, quel est le logiciel utilisé par Angular pour aider à construire et regrouper des modules à servir au navigateur. Polyfills contient des scripts pour prendre en charge les différents types de navigateurs, et styles sont des styles globaux compilés pour l'application. Le fournisseur contient alors des scripts angulaires ainsi que d'autres scripts de dépendance de bibliothèque. Et main.js contient le code de votre application angulaire, et ce fichier est transpilé à partir du fichier main.ts dans le code source de votre projet. Alors maintenant, je vais passer au code Visual Studio et ouvrez le fichier main.ts, qui se trouve dans le dossier source, et dans ce fichier, vous verrez cette ligne appelant la méthode du module d'amorçage. Cette ligne est ce qui commence à amorcer l'application pour le navigateur, en commençant par le module qui est passé à la méthode ici. Ce module est le module de routage de l'application, et c'est le point de départ pour qu'Angular se charge tous les autres modules et dépendances. Et ce module contient ce composant racine c'était dans le fichier source. Ensuite, le fichier index.HTML est le fichier que les navigateurs recherchent et chargez-le en premier, lorsqu'un utilisateur accède à votre site. C'était le fichier source qui était affiché dans le navigateur. L'application bootstrap est injecté dans le DOM en utilisant ce point d'entrée ici, le sélecteur pour le composant d'itinéraire. Et aux scripts qui étaient à la fin du fichier source sont ajoutés par angulaire après le processus de construction. Il doit d'abord transpiler tout le code TypeScript en JavaScript avant de le transmettre au navigateur. C'est tout pour cette leçon, introduction de l'application, bootstrap, et regarde la prochaine leçon en apprendre davantage sur Le processus d'amorçage automatique d'Angular.

Intermédiaire Fournisseur : Michaela Ochnich 3 leçons · 13m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce chapitre explique comment le framework Angular démarre une application et la fait fonctionner dans le navigateur. Vous apprendrez comment Angular démarre automatiquement une application par défaut, ainsi que comment implémenter l’amorçage manuel pour votre application.

Ce que vous allez apprendre

Comprendre comment le framework Angular amorce une application et l'exécute dans le navigateur
Explorer le processus global d'amorçage dans Angular
Apprendre comment Angular amorce automatiquement une application par défaut
Mettre en œuvre un amorçage manuel pour votre application Angular

Points clés à retenir

Ce chapitre explique comment le framework Angular amorce une application et la fait fonctionner dans le navigateur.
Angular amorce automatiquement une application par défaut.
Un amorçage manuel peut être mis en œuvre pour contrôler la façon dont votre application démarre.
Le chapitre offre un aperçu de l'amorçage ainsi que des approches d'amorçage automatique et manuel.

Foire aux questions

Que couvre ce cours ?

Il explique comment le framework Angular amorce une application et la fait fonctionner dans le navigateur, y compris l'amorçage automatique par défaut et la façon de mettre en œuvre un amorçage manuel.

Quelles leçons sont incluses ?

Le cours comprend trois leçons : Vue d'ensemble de l'amorçage (Bootstrapping Overview), Amorçage automatique (Automatic Bootstrapping) et Amorçage manuel (Manual Bootstrapping).

Quelles compétences vais-je acquérir grâce à ce cours ?

Vous travaillerez avec Angular (cadre Web), l'interface utilisateur Angular (Angular UI), les cadres d'application (Application Frameworks), Bootstrap (cadre front-end), Bootstrap Protocol et l'amorçage (bootstrapping).

Quelle est la différence entre l'amorçage automatique et manuel dans ce cours ?

Le cours montre comment Angular amorce automatiquement une application par défaut, ainsi que la manière d'amorcer manuellement une application vous-même.