I am trying to understand Angular (sometimes called Angular2+), then I came across @Module
:
Imports
Declarations
Providers
Following Angular Quick Start
This question is related to
angular
angular-module
Adding a quick cheat sheet that may help after the long break with Angular:
Example:
declarations: [AppComponent]
What can we inject here? Components, pipes, directives
Example:
imports: [BrowserModule, AppRoutingModule]
What can we inject here? other modules
Example:
providers: [UserService]
What can we inject here? services
Example:
bootstrap: [AppComponent]
What can we inject here? the main component that will be generated by this module (top parent node for a component tree)
Example:
entryComponents: [PopupComponent]
What can we inject here? dynamically generated components (for instance by using ViewContainerRef.createComponent())
Example:
export: [TextDirective, PopupComponent, BrowserModule]
What can we inject here? components, directives, modules or pipes that we would like to have access to them in another module (after importing this module)
Components are declared, Modules are imported, and Services are provided. An example I'm working with:
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 { }
@NgModule
constructs:import { x } from 'y';
: This is standard typescript syntax (ES2015/ES6
module syntax) for importing code from other files. This is not Angular specific. Also this is technically not part of the module, it is just necessary to get the needed code within scope of this file.imports: [FormsModule]
: You import other modules in here. For example we import FormsModule
in the example below. Now we can use the functionality which the FormsModule has to offer throughout this module.declarations: [OnlineHeaderComponent, ReCaptcha2Directive]
: You put your components, directives, and pipes here. Once declared here you now can use them throughout the whole module. For example we can now use the OnlineHeaderComponent
in the AppComponent
view (html file). Angular knows where to find this OnlineHeaderComponent
because it is declared in the @NgModule
.providers: [RegisterService]
: Here our services of this specific module are defined. You can use the services in your components by injecting with dependency injection.// 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 { }
imports
are used to import supporting modules like FormsModule, RouterModule, CommonModule, or any other custom-made feature module.
declarations
are used to declare components, directives, pipes that belong to the current module. Everyone inside declarations knows each other. For example, if we have a component, say UsernameComponent, which displays a list of the usernames and we also have a pipe, say toupperPipe, which transforms a string to an uppercase letter string. Now If we want to show usernames in uppercase letters in our UsernameComponent then we can use the toupperPipe which we had created before but the question is how UsernameComponent knows that the toupperPipe exists and how it can access and use that. Here come the declarations, we can declare UsernameComponent and toupperPipe.
Providers
are used for injecting the services required by components, directives, pipes in the module.
Source: Stackoverflow.com