Welcome

Angular-Tuto.com

Angular-Tuto.com

Comment Fonctionne Angular 7

Mode de fonctionnement Angular 7

Introduction

Avant de commencer il faut s’assurer que le serveur/Application Angular tournent encore, sinon rien ne sera affiché. Et dans ce cas il suffit d’appeler la commande “ng serve” pour relancer.

Dans un tutoriel précédent on a mentionné, qu’on peut utiliser Visual studio code pour créer nos projets Angular. Maintenant on va utiliser l’IDE Visual studio code que vous pouvez le télécharger gratuitement pour MAc et Windows à partir du Site officiel.

Dans cet article vous allez comprendre comment angular lance et l'application. Et vous allez suivre le scénario suivi pour afficher une page Angular. On parlera du LifeCycle dans un article prochain

Dans une deuxième partie nous allons intégrer la bibliothèque css Bootstap dans notre projet qui sera utilisée dans tous les exemples futurs.

Angular Comment ça fonctionne exactement

Pour répondre à cette question, il suffit de régarder la structure des fichiers et les inter-appels

Pour commencer l'édition de votre projet, rendez-vous dans le noeud src/app puis ouvrir le fichier app.component.html

Comment Fonctionne Angular 7

Ce fichier est le rendu visuel de la première page de notre projet. si vous changer un élément html ça sera automatiquement et immédiatement affiché sur le navigateur à l’adresse “localhost:4200” (qui est l'adresse par défaut des tous les projets Angulars créer par Angular CLI).

Une remarque assez importante: il faut que le serveur tourne toujours. sinon dans le cas ou vous redémarrer votre machine/serveur ou pour autre raison vous devez ouvrir cmd et se positionner dans la racine du projet puis exécuter la commande “ng serve”.

app.component.html: est le fichier html du component on appelle ça la “Template” du component.

app.component.ts: est la définition du composant. C'est le fichier qui contient le code source. En fait la template cherche les propriétés bindées dans ce fichier. Comment Fonctionne Angular 7

On remarque que dans le component (la définition du component: app.component.ts) que notre composant expose la propriété “title” qui sera consommée et évaluée par la template (app.component.html). Si vous changer la valeur de title elle sera changée immédiatement dans le navigateur.on appelle ce phénomène Databinding. On parlera du DataBinding dans un article séparé.

On a parlé du component (definition & Template) ? comment ce component est il envoyé à la page principale index.html ? Quel est lien entre les deux ? Sachant qu'on peut créer plusieurs components à la fois comment Angular choisi le component à charger.
Si vous regardez dans la définition du component on a défini la propriété “selector” du component à “app-root”.

Comment Fonctionne Angular 7

maintenant jetant un coup d’oeil sur le fichier index.html (Index.html c'est la page principale chargée par Angular. Dans cette page on choisi le component à appeler parmis plusieurs d'autres). là, on fait appel à <app-root> qui est le selector de notre component. Donc notre page principale index.html va chercher le component ayant ce nom et elle le charge.

Comment Fonctionne Angular 7

Pour résumer

Angular charge par défaut la page Index.HTML. Pauis Angular cherhe les balises qui correspondent à des components. S'il trouve une basile comme dans notre cas: <app-root>. Il cherchent dans tous les component jusqu'à trouver celui qui à la propriété selector = app-root. Si le component est trouvé il le charge avec sa template.

Ajouter Bootstrap

Bootstrap est une bibliothèque css très connue . Pour l'integrer dans notre projet, on a besoin de la télécharger et l’installer sur le projet.

Il faut faire distinction entre la bibliothèque css Bootstrap et le mot clé bootstrap utilisé dans Angular qui signifie Déclencher ou lancer (On va l’utiliser par la suite).

Première étape: se positionner sur la racine du projet puis exécuter la commande suivante qui permet d’installer bootstrap version 3 :

Comment Fonctionne Angular 7

Après l’installation avec succès de bootstrap, dans le dossier du projet. On a besoin d’informer Angular implicitement de l’existence de ce nouveau module. Pour ceci , il faut modifier le fichier de configuration angular.json.
Il suffit d’ajouter le path du fichier “bootstrap.min.js” au bloc style comme ça: Comment Fonctionne Angular 7

Attention aux fautes d’orthographe et au path. Pour vérifier le résultat, il faut simplement inspecter le fichier rendu.

Comment Fonctionne Angular 7

Scénario complet

Il faut comprendre comment Angular trouve et lance le premier module. En fait, tout à l’heure on a dit que la première page à charger c’est la page “index.html”. ça est toujours vrais. Mais, avant ça, Angular commence par lancer le module principal “main.ts”.

Comment Fonctionne Angular 7

Vous avez remarquez que main.ts (voir ligne 4) commence par importer le module “AppModule” from … son path. Puis (Voir ligne 11) il invoque ce module en utilisant la méthode “bootstrapModule(AppModule)”. Ainsi il commence à chercher la définition de ce module

Comment Fonctionne Angular 7

Maintenant si on entre à l'intérieur du module “Appmodule” on trouve qu’il bootstrap(déclenche) le component qui s’appelle “AppComponent”

Comment Fonctionne Angular 7

Et comme ça angular trouvera son chemin vers le component souhaité.

Pour résumer

  1. Angular cherche main.ts
  2. A l’interieur de “main.ts” il cherche le module à déclencher (Dans notre cas: AppModule)
  3. il cherche le fichier de ce module (dans notre cas c’est app.module.ts)
  4. à l'intérieur de “app.module.ts” il cherche le component à déclencher (dans notre cas c’est appComponent)
  5. comme on a déjà vu, le component est composé par une definition, template … tout ça donne le rendu visuel final.

Conclusion

Connaitre le scénario de chargement est important pour comprendre la logique angular. Nous avons vu que Angular commence par charger le module main qui fait son travail pour trouver notre permier component "app-root".

Dans l'article suivant nous allons créer un nouveau componet et nous verrons en détails ces propriétés.

Maintenant si vous avez des questions et/ou des remarques n'hésitez pas à laisser un commentaire


Commentaires (0)

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)