Introduction au module Angular

Introduction au module Angular

Introduction au module Angular

Objectifs

Connaitre le module Angular

Présentation

Introduction au module Angular

Angular est une plate-forme et un framework pour la construction d’applications clientes d’une seule page en HTML et TypeScript. Angular est écrit en TypeScript. Il implémente les fonctionnalités de base et facultatives sous la forme d’un ensemble de bibliothèques TypeScript que vous importez dans vos applications.
Une application Angular se compose de :

Un à plusieurs modules dont un est principal.
Chaque module peut inclure :

Des composant web : La partie visible de la ‘application Web (IHM)
Des services pour la logique applicative. Les composants peuvent utiliser les services via le principe de l’injection des dépendances.
Les directives : un composant peut utiliser des directives
Les pipes : utilisés pour formater l’affichage des données dans les composants.

Introduction au module Angular

Définition

Dans Angular, un module est un mécanisme pour regrouper des composants, des directives, des canaux et des services qui sont liés, d’une manière qui peut être combinée avec d’autres modules pour créer une application. Une application angulaire peut être considérée comme un puzzle où chaque pièce (ou chaque module) est nécessaire pour pouvoir voir l’image complète.
Angular utilise des modules comme méthode pour lier divers composants, directives, tuyaux et services dans une seule unité cohérente.
Le module vous permet de rendre certaines fonctionnalités publiques pour les modèles de composants, ainsi que de rendre les services disponibles au niveau de l’application.

Une utilisation basique des modules

Introduction au module Angular

Pour créer un module, vous devez définir une classe et la décorer avec le mot clé @ngModule. Vous devrez commencer par importer deux modules d’Angular.
Le NgModule et BrowserModule

import { NgModule } from '@angular/core';

import { BrowserModule } from ‘@angular/platform-browser’;

Le NgModule fournit le décorateur pour la configuration du module. Le BrowserModule fournit des services importants que toute l’application peut utiliser (tels que NgFor et NgIf).

Un module Angular doit toujours importer ces deux éléments et vous pouvez importer des modules supplémentaires à partir de composants angulaires ou tiers à mesure que votre application se développe.

declarations

La section déclarations déclare un tableau de tous les composants, directives et canaux personnalisés que nous voulons que notre module inclue.

declarations: [ AppComponent, AppStandings ],

Pour votre application principale, vous déclarerez généralement le composant qui produit le menu et les composants utilisés pour présenter diverses vues de données.
Ces déclarations sont utilisables dans le module, mais ne sont pas visibles à l’extérieur du module, sauf si elles sont explicitement exportées.

imports

Si vous souhaitez fournir des composants ou des directives aux composants référencés dans le module, vous devrez les inclure dans le tableau d’importation.
Par exemple, la liste suivante permet au composant d’application d’utiliser les directives standard (telles que *NgIf) et donne accès aux composants de routage (voir le tutoriel suivant pour plus de détails sur le routage).
imports: [ BrowserModule, FormsModule, HttpModule ]
Cette propriété permet de déclarer les modules dont dépend notre module;

exports

Le mot-clé exports fournit un tableau de composants que le module exporte, ce qui permet d’importer des modules pour les utiliser.
Les déclarations au sein du module sont privées; vous devrez exporter spécifiquement les composants, directives, etc. que vous souhaitez partager avec d’autres modules.
exports: [ AppComponent ]
Cette propriété permet de déclarer le sous-ensemble de déclaration qui sera visible par les autres modules;

providers

Le mot-clé providers contient un ensemble de services qui seront mis à la disposition de l’application entière.
l’exemple de code suivant rend les appRoutingProviders d’Angular et notre propre SoccerService interne disponibles dans toute l’application.
providers: [ appRoutingProviders, SoccerService ],
Dans cette propriété, vous devez déclarer les services que vous allez créer dans le cadre de ce module. Ces services contribueront à alimenter la collection globlale des services accessibles par tous les composants de l’application;

bootstrap

Le mot clé bootstrap fournit un tableau de tous les composants pouvant être amorcés. Il s’agit généralement du composant d’application uniquement. Si un composant peut être amorcé, il aura son propre sélecteur, modèle, etc., et permettra à Angular de l’ajouter à un site Web.
Définit le root component qui contiendra l’ensemble des autres components. Seul le root module peut déclarer cette propriété;

Les types de @NgModules

Il existe cinq types de NgModules –

Module de fonctionnalités ( Features Module)

Les modules de fonctionnalités sont des NgModules dans le but d’organiser un code d’application.

Module de routage (Routing Module)

Le routage est utilisé pour gérer les itinéraires et permet également la navigation d’une vue à une autre vue lorsque les utilisateurs effectuent des tâches d’application.

Module de service (Service Module)

Les modules qui contiennent uniquement des services et des fournisseurs. Il fournit des services utilitaires tels que l’accès aux données et la messagerie. Le AppModule racine est le seul module qui doit importer des modules de service. Le HttpClientModule est un bon exemple de service.

Module Widget (Widget Module)

Les bibliothèques de composants d’interface utilisateur tierces sont des modules de widget.

Module partagé (Shared Module)

Le module partagé vous permet d’organiser votre code d’application. Vous pouvez placer vos composants, directives et tuyaux couramment utilisés dans le même module et les utiliser à tout moment pour ce module.

Sommaire du cours Angular

Angular

Introduction au module Angular