modules - angular.module angular 6

¿Cuál es la diferencia entre declaraciones, proveedores e importación en NgModule?

Question

Estoy tratando de entender Angular (a veces llamado Angular2 +), luego me encontré con @Module :

1. Importaciones

2. Declaraciones

3. Proveedores

Siguiente inicio rápido angular

Answer 1

@NgModule angulares de @NgModule :

1. import { x } from ''y''; : Esta es la sintaxis de tipografía estándar (sintaxis del módulo ES2015/ES6 ) para importar código de otros archivos. Esto no es angular específico . Además, técnicamente esto no forma parte del módulo, solo es necesario obtener el código necesario dentro del alcance de este archivo.
2. imports: [FormsModule] : imports: [FormsModule] otros módulos aquí. Por ejemplo, importamos FormsModule en el siguiente ejemplo. Ahora podemos usar la funcionalidad que FormsModule tiene para ofrecer en este módulo.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive] : coloca sus componentes, directivas y tuberías aquí. Una vez declarado aquí, ahora puede usarlos en todo el módulo. Por ejemplo, ahora podemos usar OnlineHeaderComponent en la vista AppComponent (archivo html). Angular sabe dónde encontrar este OnlineHeaderComponent porque se declara en @NgModule .
4. providers: [RegisterService] : aquí se definen nuestros servicios de este módulo específico. Puede usar los servicios en sus componentes inyectando inyección de dependencia.

Módulo de ejemplo:

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

Answer 2

Agregar una hoja de trucos rápida que puede ayudar después del largo descanso con Angular:

Declaraciones

Ejemplo:

declarations: [AppComponent]

¿Qué podemos inyectar aquí? Componentes, tuberías, directivas.

IMPORTACIONES

Ejemplo:

imports: [BrowserModule, AppRoutingModule]

¿Qué podemos inyectar aquí? otros módulos

PROVEEDORES

Ejemplo:

providers: [UserService]

¿Qué podemos inyectar aquí? servicios

OREJA

Ejemplo:

bootstrap: [AppComponent]

¿Qué podemos inyectar aquí? El componente principal que generará este módulo (nodo principal superior para un árbol de componentes)

COMPONENTES DE ENTRADA

Ejemplo:

entryComponents: [PopupComponent]

¿Qué podemos inyectar aquí? componentes generados dinámicamente (por ejemplo, utilizando ViewContainerRef.createComponent ())

EXPORTAR

Ejemplo:

export: [TextDirective, PopupComponent, BrowserModule]

¿Qué podemos inyectar aquí? componentes, directivas, módulos o tuberías a los que nos gustaría tener acceso en otro módulo (después de importar este módulo)

Answer 3

Los componentes se declaran, los módulos se importan y se proporcionan servicios. Un ejemplo con el que estoy trabajando:

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

imports : se utiliza para importar módulos de soporte como FormsModule, RouterModule, CommonModule o cualquier otro módulo de características personalizado.

declarations : se utiliza para declarar componentes, directivas, tuberías que pertenecen al módulo actual. Todo dentro de las declaraciones se conoce entre sí. Por ejemplo, si tenemos un componente, digamos UsernameComponent, que muestra la lista de los nombres de usuario, y también tenemos una tubería, digamos toupperPipe, que transforma la cadena en una cadena de letras mayúsculas. Ahora, si queremos mostrar los nombres de usuario en letras mayúsculas en nuestro UsernameComponent, podemos usar el toupperPipe que habíamos creado antes, pero cómo UsernameComponent sabe que existe el toupperPipe y cómo podemos acceder y usarlo, aquí vienen las declaraciones, podemos declarar UsernameComponent y toupperPipe.

Providers : se utiliza para inyectar los servicios requeridos por componentes, directivas, tuberías en nuestro módulo.

Lea en detalle aquí: https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 5

Conceptos angulares

• imports hace que las declaraciones exportadas de otros módulos estén disponibles en el módulo actual
• declarations deben hacer que las directivas (incluidos los componentes y las tuberías) del módulo actual estén disponibles para otras directivas en el módulo actual. Los selectores de directivas, componentes o tuberías solo se comparan con el HTML si se declaran o importan.
• providers deben dar a conocer los servicios y valores a DI (inyección de dependencia). Se agregan al ámbito raíz y se inyectan a otros servicios o directivas que los tienen como dependencia.

Un caso especial para los providers son los módulos con carga lenta que obtienen su propio inyector secundario. providers de un módulo con carga diferida solo se proporcionan a este módulo con carga diferida de manera predeterminada (no toda la aplicación como lo es con otros módulos).

Para obtener más detalles sobre los módulos, consulte también https://angular.io/docs/ts/latest/guide/ngmodule.html

• exports hace que los componentes, directivas y tuberías estén disponibles en módulos que agregan este módulo a las imports . exports también se pueden utilizar para reexportar módulos como CommonModule y FormsModule, que a menudo se realiza en módulos compartidos.

• entryComponents registra componentes para la compilación fuera de línea para que puedan usarse con ViewContainerRef.createComponent() . Los componentes utilizados en las configuraciones de enrutador se agregan implícitamente.

Importaciones TypeScript (ES2015)

import ... from ''foo/bar'' (que puede resolverse en index.ts ) son para importaciones de TypeScript. Los necesita cada vez que utiliza un identificador en un archivo de mecanografía que se declara en otro archivo de mecanografía.

Las @NgModule() de Angular @NgModule() y la imports TypeScript son conceptos completamente diferentes .

Consulte también jDriven: sintaxis de importación de TypeScript y ES6

La mayoría de ellos son en realidad sintaxis de módulo ECMAScript 2015 (ES6) que también utiliza TypeScript.