13. Ajouter le module racine

14. Créer un point d’entrée pour votre application

Pour l’instant nous n’avons qu’un unique composant dans notre application, mais imaginez que notre application soit composée de 100 pages, avec 100 composants différents, comment ferions-nous pour nous y retrouvez ?

L’idéal serait de pouvoir regrouper nos composants par fonctionnalité : par exemple regrouper tous les composants qui servent à l’authentification entre eux, tous ceux qui servent à construire un blog entre eux, etc.

Eh bien, Angular permet cela, grâce aux modules ! Tous nos composants seront regroupés au sein de modules.

Mais du coup ? … Il nous faut au moins un module pour notre composant, non ?

Bravo ! Vous avez tout compris !

Au minimum, votre application doit contenir un module: le module racine. Au fur et à mesure que votre application se développera, vous rajouterez d’autres modules pour couvrir de nouvelles fonctionnalités.

Dans la vidéo je présente le code du module racine de notre application, app.module.ts, à placer dans notre dossier app.

Je vais présenter ce code rapidement. D’abord, on retrouve des importations en haut du fichier. Pour déclarer un module, on importe l’annotation @NgModule contenue dans le cœur d’Angular lui-même, à la ligne 1.

Ensuite on importe le BrowserModule, qui est un module qui fournit des éléments essentiels pour le fonctionnement de l’application, comme les directive ngIf et ngFor dans tous nos templates, nous reviendrons dessus plus tard.

Ensuite on importe le seul composant AppComponent de notre application, que nous allons rattacher à ce module.

Mais le plus important ici est l’annotation @NgModule, car c’est elle qui permet de déclarer un module:

  1. imports : permet de déclarer tous les éléments que l’on a besoin d’importer dans notre module. Les modules racines ont besoin d’importer le BrowserModule (contrairement aux autres modules que nous ajouterons par la suite dans notre application).
  2. declarations : Une liste de tous les composants et directives qui appartiennent à ce module. Nous avons donc ajouté notre unique composant AppComponent.
  3. bootstrap : Permet d’identifier le composant racine, qu’Angular appelle au démarrage de l’application. Comme le module racine est lancé automatiquement par Angular au démarrage de l’application, et qu’AppComponent est le composant racine du module racine, c’est donc AppComponent qui apparaîtra au démarrage de l’application. Ça va, rien de compliqué si on prend le temps de bien comprendre.

Lors de ce cours, nous commencerons à travailler avec une application mono-module, puis nous ajouterons d’autres modules pour que vous voyiez comment se passe le développement d’une application plus complexe.

14. Créer un point d’entrée pour votre application

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s