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

Après démarrage rapide angulaire

Answer 1

Angulaire Concepts

• imports fait de l'export des déclarations d'autres modules disponibles dans le module courant
• declarations sont à formuler des directives (y compris les composants et les tuyaux) à partir du module en cours disponible pour d'autres directives dans le module en cours. Sélecteurs de directives, les composants ou les tubes sont seulement mis en correspondance avec le HTML si elles sont déclarées ou importés.
• providers sont à rendre les services et les valeurs connues de DI. Ils sont ajoutés à la racine de la portée et ils sont injectés à d'autres services ou des directives qui ont eux aussi la dépendance.

Un cas particulier pour providers sont paresseux, les modules chargés que leur propre enfant de l'injecteur. providers d'un paresseux module chargé sont uniquement fournies à ce paresseux module chargé par défaut (pas l'ensemble de l'application, comme il en est 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 tuyaux disponibles dans les modules qu'ajouter ce module à l' imports. exports peut également être utilisé pour la réexportation des modules tels que CommonModule et FormsModule, qui est souvent fait dans des modules partagés.

• entryComponents inscrit les composants hors ligne de compilation, de sorte qu'ils peuvent être utilisés avec des ViewContainerRef.createComponent(). Les composants utilisés dans la configuration des routeurs sont ajoutés implicitement.

Tapuscrit (ES2015) importations

import ... from 'foo/bar' (ce qui peut correspondre à un index.ts) sont pour Tapuscrit importations. Vous avez besoin de ces chaque fois que vous utilisez un identificateur dans un tapuscrit de fichier qui est déclarée dans un autre fichier d'enregistrement de fichier.

Angulaire de l' @NgModule() imports et Tapuscrit import sont entièrement différents concepts.

Voir aussi jDriven - Tapuscrit et ES6 importation de syntaxe

La plupart d'entre eux sont en fait de la plaine ECMAScript 2015 (ES6) module syntaxe que la Machine utilise ainsi.

Answer 2

imports: est utilisé pour importer des modules de soutien aime FormsModule, RouterModule, CommonModule, ou de toute autre coutume-faites de ces modules.

declarations: permet de déclarer des composants, des directives, des tuyaux qui appartient au module en cours. Tout à l'intérieur de déclarations connaît les uns des autres. Par exemple, si nous avons un composant, dire UsernameComponent, qui affiche la liste des noms d'utilisateurs, et nous avons aussi un tuyau, disons toupperPipe, transformer la chaîne en majuscules lettre de la chaîne. Maintenant, Si nous voulons afficher les noms d'utilisateur en majuscules dans notre UsernameComponent, nous pouvons utiliser la toupperPipe qui nous avait créé avant mais comment UsernameComponent savoir que le toupperPipe existent et comment nous pouvons accéder et de l'utiliser, voici les déclarations, nous pouvons déclarer UsernameComponent et toupperPipe.

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

Lire en détail ici: https://angular.io/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

Angulaire @NgModule constructions:

1. import { x } from 'y';: C'est la norme tapuscrit de la syntaxe (ES2015/ES6 module syntaxe) pour l'importation de code à partir d'autres fichiers. Ce n'est pas Angulaire spécifique. Aussi ce n'est techniquement pas partie d'un module, il est juste nécessaire pour obtenir le code nécessaire à l'intérieur de la portée de ce fichier.
2. imports: [FormsModule]: Vous importez des autres modules. Par exemple, nous importer FormsModule dans l'exemple ci-dessous. Maintenant, nous pouvons utiliser la fonctionnalité qui le FormsModule a à offrir tout au long de ce module.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Vous mettez vos composants, des directives et des tuyaux ici. Une fois déclarée, ici, maintenant vous pouvez les utiliser tout au long de l'ensemble du module. Par exemple, nous pouvons maintenant utiliser l' OnlineHeaderComponent dans la AppComponent vue (fichier html). Angulaire sait où trouver ce OnlineHeaderComponent car il est déclaré dans l' @NgModule.
4. providers: [RegisterService]: C'est là que nos services de ce module sont définis. Vous pouvez utiliser les services d'une de vos pièces par injection avec l'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 { }