Quelle est la différence entre les déclarations, les fournisseurs et l'importation dans NgModule?

Question

J'essaie de comprendre Angular (parfois appelé Angular2 +), puis je suis tombé sur @Module:

1. Importations

2. Les déclarations

3. Fournisseurs

Suivant Démarrage rapide angulaire

Answer 1

Concepts angulaires

• imports rend les déclarations exportées d'autres modules disponibles dans le module actuel
• declarations doit mettre les directives (y compris les composants et les tuyaux) du module actuel à la disposition des autres directives du module actuel. Les sélecteurs de directives, de composants ou de canaux ne sont comparés au code HTML que s'ils sont déclarés ou importés.
• providers consiste à faire connaître les services et les valeurs à DI (injection de dépendance). Ils sont ajoutés à la portée racine et ils sont injectés à d'autres services ou directives qui en ont la dépendance.

Un cas particulier pour providers sont des modules chargés paresseux qui ont leur propre injecteur enfant. providers d'un module chargé paresseux sont uniquement fournis par défaut à ce module chargé paresseux (et non à l'ensemble de l'application, comme c'est le cas avec d'autres modules).

Pour plus de détails sur les modules, voir aussi https://angular.io/docs/ts/latest/guide/ngmodule.html

• exports rend les composants, les directives et les canaux disponibles dans les modules qui ajoutent ce module à imports. exports peut également être utilisé pour réexporter des modules tels que CommonModule et FormsModule, souvent utilisés dans des modules partagés.

• entryComponents enregistre les composants pour la compilation hors ligne afin qu'ils puissent être utilisés avec ViewContainerRef.createComponent(). Les composants utilisés dans les configurations de routeur sont ajoutés implicitement.

TypeScript (ES2015) importe

import ... from 'foo/bar' (qui peut être transformé en index.ts ) est destiné aux importations TypeScript. Vous en avez besoin chaque fois que vous utilisez un identificateur dans un fichier TypeScript déclaré dans un autre fichier TypeScript.

Les fonctions angulaires @NgModule()imports et TypeScript import sont des concepts totalement différents .

Voir aussi syntaxe d'importation jDriven - TypeScript et ES6

La plupart d'entre eux sont en fait de la syntaxe de module simple ECMAScript 2015 (ES6) que TypeScript utilise également.

Answer 2

imports: est utilisé pour importer des modules de support tels que FormsModule, RouterModule, CommonModule ou tout autre module de fonctionnalité sur mesure.

declarations: est utilisé pour déclarer des composants, des directives, des pipes appartenant au module actuel. Tout ce qui se trouve dans les déclarations se connaît. Par exemple, si nous avons un composant, disons UsernameComponent, qui affiche la liste des noms d'utilisateur, et nous avons également un tuyau , dites toupperPipe, qui transforme une chaîne en chaîne de lettre majuscule. Maintenant, si nous voulons montrer les noms d’utilisateur en majuscules dans notre UsernameComponent, nous pouvons utiliser le toupperPipe que nous avions créé auparavant, mais comment UsernameComponent sait que le toupperPipe existe et comment nous pouvons y accéder et l’utiliser, voici les déclarations, nous pouvons déclarer UsernameComponent et toupperPipe.

Providers: est utilisé pour injecter les services requis par les composants, les directives et les tuyaux de notre module.

Lire en détail ici: https://ang.ular/docs/ts/latest/guide/ngmodule.html

Answer 3

Les composants sont déclarés, les modules sont importés et les services fournis. Un exemple avec lequel je travaille:

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


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

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

Answer 4

Angular @NgModule construit:

1. import { x } from 'y';: Il s'agit de la syntaxe standard TypeScript (ES2015/ES6 module) pour importer du code à partir d'autres fichiers. Ceci n'est pas spécifique à Angular. Aussi, techniquement, cela ne fait pas partie du module, il est juste nécessaire d’obtenir le code nécessaire dans le cadre de ce fichier.
2. imports: [FormsModule]: Vous importez d'autres modules ici. Par exemple, nous importons FormsModule dans l'exemple ci-dessous. Nous pouvons maintenant utiliser les fonctionnalités offertes par FormsModule tout au long de ce module.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Vous mettez vos composants, directives et tuyaux ici. Une fois déclaré ici, vous pouvez maintenant les utiliser tout au long du module. Par exemple, nous pouvons maintenant utiliser le OnlineHeaderComponent dans la vue AppComponent (fichier html). Angular sait où trouver cette OnlineHeaderComponent car elle est déclarée dans le @NgModule.
4. providers: [RegisterService]: Ici sont définis nos services pour ce module spécifique. Vous pouvez utiliser les services de vos composants en injectant avec injection de dépendance.

Exemple de module:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }