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

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

  1. importazioni
  2. dichiarazioni
  3. provider

Dopo l’ avvio rapido angular

Concetti angolari

  • imports rendono disponibili le dichiarazioni esportate di altri moduli nel modulo corrente
  • declarations devono rendere le direttive (inclusi componenti e condotte) dal modulo corrente disponibili ad altre direttive nel modulo corrente. I selettori di direttive, componenti o pipe vengono confrontati con HTML solo se dichiarati o importati.
  • providers devono rendere noti servizi e valori a DI. Vengono aggiunti all’ambito della radice e vengono iniettati ad altri servizi o direttive che li hanno come dipendenza.

Un caso speciale per i providers sono i moduli pigri caricati che ottengono il proprio iniettore figlio. providers di un modulo lazy loaded vengono forniti solo a questo modulo lazy loaded di default (non l’intera applicazione come con altri moduli).

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

  • exports rendono i componenti, le direttive e le condutture disponibili nei moduli che aggiungono questo modulo alle imports . exports possono anche essere utilizzate per riesportare moduli come CommonModule e FormsModule, che viene spesso eseguito in moduli condivisi.

  • entryComponents registra 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 potrebbe risolversi in un index.ts ) sono per le importazioni di TypeScript. Ne hai bisogno ogni volta che usi un identificatore in un file typescript dichiarato in un altro file typescript.

Le @NgModule() di @NgModule() di Angular e l’ imports TypeScript sono concetti completamente diversi .

Vedi anche jDriven – TypeScript ed ES6 import syntax

Molti di questi sono in realtà la syntax del modulo ECMAScript 2015 (ES6) che anche TypeScript utilizza.

imports : viene utilizzato per importare moduli di supporto come FormsModule, RouterModule, CommonModule o qualsiasi altro modulo di funzione personalizzato.

declarations : è usato per dichiarare componenti, direttive, pipe che appartengono al modulo corrente. Tutto all’interno delle dichiarazioni si conosce l’un l’altro. Ad esempio, se abbiamo un componente, diciamo UsernameComponent, che mostra l’elenco dei nomi utente, e abbiamo anche una pipe, ad esempio toupperPipe, che trasforma la stringa in stringa di lettere maiuscole. Ora Se vogliamo mostrare i nomi utente in lettere maiuscole nel nostro UsernameComponent, possiamo usare la toupperPipe che avevamo creato prima, ma come UsernameComponent sa che esiste toupperPipe e come possiamo accedervi e usarlo, ecco le dichiarazioni, possiamo dichiarare UsernameComponent e toupperPipe.

Providers : viene utilizzato per iniettare i servizi richiesti da componenti, direttive, pipe nel nostro modulo.

Leggi in dettaglio qui: https://angular.io/docs/ts/latest/guide/ngmodule.html

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