Primero discutamos sobre estos términos:
- Declaraciones:
- Las declaraciones se utilizan para declarar componentes, directivas, tuberías que pertenecen al módulo actual.
- Todo lo que está dentro de las declaraciones se conoce entre sí.
- Las declaraciones se utilizan para hacer que las directivas (incluidos los componentes y las tuberías) del módulo actual estén disponibles para otras directivas del módulo actual.
- Los selectores de directivas, componentes o conductos solo se comparan con el HTML si se declaran o importan.
- Proveedores:
- Los proveedores se utilizan para dar a conocer los servicios y valores a la inyección de dependencia .
- Se añaden al ámbito raíz y se inyectan a otros servicios o directivas que los tengan como dependencia.
- Importaciones:
- Importaciones hace que las declaraciones exportadas de otros módulos estén disponibles en el módulo actual.
- Se utiliza para importar módulos de soporte como FormsModule, RouterModule, CommonModule, etc.
Diferencias:
|
Declaraciones |
Proveedores |
Importaciones |
| Las declaraciones se utilizan para hacer directivas. | Los proveedores se utilizan para hacer servicios. | Importaciones hace que las declaraciones exportadas de otros módulos estén disponibles en el módulo actual. |
| Se utiliza para declarar componentes, directivas, tuberías que pertenecen al módulo actual. | Se utiliza para inyectar los servicios requeridos por componentes, directivas, tuberías en nuestro módulo. | Se utiliza para importar módulos de soporte como FormsModule, RouterModule, etc. |
| Ex. Componente de la aplicación. | Ex. Servicio Estatal. | Ex. Módulo de navegador. |
|
Definido en la array Declaraciones en @NgModule @NgModule({ declaraciones: [ ], )} |
Definido en la array de proveedores en @NgModule. @NgModule({ proveedores: [ ], )} |
Definido en la array de importaciones en @NgModule. @NgModule({ importaciones: [], )} |
Un ejemplo en el que se utilizan las tres declaraciones , importaciones y proveedores :
Los proveedores utilizados en este proyecto son un servicio personalizado llamado UserService.
ng g s User
usuario.servicio.ts
javascript
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
}
Este UserService se utiliza como proveedor en app.module.ts.
aplicación.módulo.ts
javascript
// imports for the application
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
// declarations for the application
import { AppComponent } from './app.component';
// providers for the application
import { UserService } from './user.service';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
aplicación.componente.html
html
<h1>GeeksforGeeks</h1> <ul> <li>imports in this app: BrowserModule, AppRoutingModule, HttpClientModule, FormsModule</li> <li>declarations in this app: AppComponent</li> <li>providers in this app: UserService</li> </ul>
Producción:
