Composant vs module dans Angular

1. Module en Angular
2. Composants en Angular
3. Conclusion

Cet article présentera les composants et les modules dans Angular et discutera de leurs différences.

Module en Angular

Le module est une fonctionnalité complète de notre application.

Par exemple, l’authentification de l’utilisateur est une fonctionnalité complète qui inclut la connexion, l’enregistrement et l’authentification de l’utilisateur (mot de passe oublié et vérification de l’e-mail). Ainsi, l’authentification des utilisateurs est un module de notre application.

Lorsque nous avons un groupe de fonctionnalités liées les unes aux autres, tout comme l’authentification des utilisateurs, le module contiendra un ou plusieurs composants, services et pips.

Par exemple, nous avons trois composants login, register, et forget a password dans l’authentification de l’utilisateur. Notre service sera un appel d'API dans l’authentification des utilisateurs, et les pips seront des aides.

Ainsi, la combinaison de ces différentes fonctionnalités qui sont liées les unes aux autres en fait un seul module dans notre application Angular.

Maintenant, créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Ensuite, nous allons ouvrir le fichier app.module.ts.

# angular
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Comme vous pouvez le voir dans le code ci-dessus, nous avons importé NgModule et BrowserModule dans notre module App. Nous avons également importé un composant, AppComponent.

Cependant, si nous voulons importer plus de composants dans nos modules, nous pouvons utiliser des déclarations pour enregistrer nos composants dans notre module. Si nous allons importer un autre module, nous pouvons utiliser imports.

Nous pouvons facilement créer de nouveaux modules dans notre application Angular en utilisant la commande suivante.

# angular
ng generate module user-auth

Cette commande créera un nouveau dossier dans le dossier App et créera un nouveau module, comme indiqué ci-dessous.

Production:

Composants en Angular

Le composant est un morceau de code créé pour une tâche spécifique.

Par exemple, si nous voulons que les utilisateurs s’enregistrent eux-mêmes, nous pouvons créer un nouveau composant, register, qui permettra aux utilisateurs de s’enregistrer sur notre application.

Les composants peuvent être réutilisés en fonction de leurs besoins où ils peuvent être réutilisés. Par exemple, si nous voulons utiliser l’en-tête et le pied de page dans toutes nos pages Web dans l’application Angular, nous pouvons créer en-tête et pied de page et importer ces composants là où nous voulons les utiliser.

Un composant est composé de 4 fichiers :

1. Fichier CSS utilisé pour écrire les styles du composant.
2. Fichier HTML utilisé pour écrire le frontend ou la vue de notre composant.
3. Fichier de spécifications utilisé pour écrire des cas de test.
4. Fichier de composant dans lequel nous écrivons une partie logique de notre composant contenant des fonctions, des appels d’API, etc.

Maintenant, créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Ensuite, nous allons ouvrir le fichier app.component.ts.

# angular
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "App Component";
}

Comme vous pouvez le voir dans le code ci-dessus, nous avons importé une méthode component de @angular/core. Maintenant, nous pouvons définir selector, templateUrl et styleUrls pour notre composant en utilisant le component que nous venons d’importer.

Le sélecteur est une balise utilisée pour afficher le contenu de notre composant dans notre application Angular.

À partir du code ci-dessus, si nous créons une balise <app-root></app-root> dans notre fichier index.html, l’application Angular détectera la balise et la remplacera par le contenu de notre composant.

templateUrl est utilisé pour définir le modèle de notre composant. Et styleUrls définira le fichier CSS de notre composant dans lequel les styles sont écrits.

Nous pouvons facilement créer de nouveaux composants dans notre application Angular à l’aide de la commande suivante.

# angular
ng generate component login

Cette commande créera 4 nouveaux fichiers avec un nouveau sélecteur pour notre composant.

Production:

Conclusion

Dans ce didacticiel, nous avons découvert les modules et les composants dans Angular, comment créer de nouveaux composants, comprendre leurs méthodes et leur composition.