Qual è la differenza tra dichiarazioni, fornitori e importazione in NgModule?

Sto cercando di capire Angular (a volte chiamato Angular2 +), poi mi sono imbattuto @Module:

1. importazioni

2. dichiarazioni

3. provider

A seguito di Angular Quick Start

Concetti angolari

• imports rende disponibili le dichiarazioni esportate di altri moduli nel modulo corrente
• declarationsdevono rendere disponibili le direttive (compresi i componenti e i tubi) dal modulo corrente ad altre direttive nel modulo corrente. I selettori di direttive, componenti o pipe vengono confrontati con l'HTML solo se vengono dichiarati o importati.
• providersdevono rendere noti servizi e valori a DI (Iniezione delle dipendenze). Vengono aggiunti all'ambito radice e vengono iniettati in altri servizi o direttive che li hanno come dipendenza.

Un caso speciale providerssono i moduli caricati in modo pigro che ottengono il proprio iniettore di bambini. providersdi un modulo caricato pigro sono forniti solo a questo modulo caricato pigro di default (non l'intera applicazione come è con altri moduli).

Per maggiori dettagli sui moduli consultare anche https://angular.io/docs/ts/latest/guide/ngmodule.html

• exportsrende i componenti, le direttive e i tubi disponibili nei moduli che aggiungono questo modulo imports. exportspuò anche essere utilizzato per riesportare moduli come CommonModule e FormsModule, che viene spesso eseguito in moduli condivisi.

• entryComponentsregistra i componenti per la compilazione offline in modo che possano essere utilizzati con ViewContainerRef.createComponent(). I componenti utilizzati nelle configurazioni del router vengono aggiunti implicitamente.

Importazioni TypeScript (ES2015)

import ... from 'foo/bar'(che può essere risolto in unindex.ts ) sono per le importazioni TypeScript. Ne hai bisogno ogni volta che usi un identificatore in un file dattiloscritto dichiarato in un altro file dattiloscritto.

Angular @NgModule() importse TypeScript importsono concetti completamente diversi .

Vedi anche jDriven - Sintassi di importazione TypeScript ed ES6

La maggior parte di essi è in realtà una semplice sintassi del modulo ECMAScript 2015 (ES6) utilizzata anche da TypeScript.

imports vengono utilizzati per importare moduli di supporto come FormsModule, RouterModule, CommonModule o qualsiasi altro modulo di funzionalità personalizzato.

declarationsvengono utilizzati per dichiarare componenti, direttive, tubi che appartengono al modulo corrente. Tutti all'interno delle dichiarazioni si conoscono. Ad esempio, se abbiamo un componente, ad esempio UsernameComponent, che visualizza un elenco dei nomi utente e abbiamo anche una pipe, ad esempio toupperPipe, che trasforma una stringa in una stringa di lettere maiuscole. Ora Se vogliamo mostrare i nomi utente in lettere maiuscole nel nostro UsernameComponent, allora possiamo usare il toupperPipe che avevamo creato prima, ma la domanda è come UsernameComponent sa che esiste il toupperPipe e come può accedervi e usarlo. Ecco le dichiarazioni, possiamo dichiarare UsernameComponent e toupperPipe.

Providers sono utilizzati per iniettare i servizi richiesti da componenti, direttive, tubi nel modulo.

I componenti vengono dichiarati, i moduli vengono importati e vengono forniti i servizi. Un esempio con cui sto lavorando:

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 { }

@NgModuleCostrutti angolari :

1. import { x } from 'y';: Si tratta della sintassi dattiloscritta standard (sintassi del ES2015/ES6modulo) per l'importazione di codice da altri file. Questo non è specifico angolare . Anche questo tecnicamente non fa parte del modulo, è solo necessario ottenere il codice necessario nell'ambito di questo file.
2. imports: [FormsModule]: Importi altri moduli qui. Ad esempio importiamo FormsModulenell'esempio seguente. Ora possiamo usare la funzionalità che FormsModule ha da offrire in questo modulo.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Metti qui i tuoi componenti, direttive e tubi. Una volta dichiarato qui ora puoi usarli in tutto il modulo. Ad esempio, ora possiamo usare OnlineHeaderComponentnella AppComponentvista (file html). Angular sa dove trovarlo OnlineHeaderComponentperché è dichiarato nel file @NgModule.
4. providers: [RegisterService]: Qui vengono definiti i nostri servizi di questo modulo specifico. È possibile utilizzare i servizi nei componenti iniettando l'iniezione di dipendenza.

Modulo di esempio:

// 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 { }

Aggiunta di un cheat sheet rapido che può essere utile dopo la lunga pausa con Angular:

DICHIARAZIONI

Esempio:

declarations: [AppComponent]

Cosa possiamo iniettare qui? Componenti, tubi, direttive

IMPORTAZIONI

Esempio:

imports: [BrowserModule, AppRoutingModule]

Cosa possiamo iniettare qui? altri moduli

FORNITORI

Esempio:

providers: [UserService]

Cosa possiamo iniettare qui? Servizi

BOOTSTRAP

Esempio:

bootstrap: [AppComponent]

Cosa possiamo iniettare qui? il componente principale che verrà generato da questo modulo (nodo principale superiore per un albero dei componenti)

COMPONENTI DI ENTRATA

Esempio:

entryComponents: [PopupComponent]

Cosa possiamo iniettare qui? componenti generati dinamicamente (ad esempio utilizzando ViewContainerRef.createComponent ())

ESPORTARE

Esempio:

export: [TextDirective, PopupComponent, BrowserModule]

Cosa possiamo iniettare qui? componenti, direttive, moduli o pipe a cui vorremmo avere accesso in un altro modulo (dopo aver importato questo modulo)

1. dichiarazioni : questa proprietà descrive i componenti, le direttive e i tubi che appartengono a questo modulo.
2. esportazioni : il sottoinsieme di dichiarazioni che dovrebbero essere visibili e utilizzabili nei modelli di componente di altri moduli Ng.
3. importazioni : altri moduli le cui classi esportate sono necessarie per i modelli di componenti dichiarati in questo NgModule.
4. fornitori : creatori di servizi che questo NgModule contribuisce alla raccolta globale di servizi; diventano accessibili in tutte le parti dell'app. (Puoi anche specificare i provider a livello di componente, che è spesso preferito.)
5. bootstrap : la vista principale dell'applicazione, chiamata componente radice, che ospita tutte le altre viste dell'app. Solo NgModule di root dovrebbe impostare la proprietà bootstrap.