ANGULAR FOR EVERYONE: PART 03
Understanding Angular Modules
What are Angular Modules?
Previously we talk about Directives and components. But how to declare it? How to let me know to Angular it is ready to be instantiated? How to import what my directive/component needs to work?
What it is (for)
There are different kinds of modules: component/directive module, routing modules, shared modules. Here we will focus on the first kind. Routing modules and shared modules need dedicated articles.
A module (in Angular context) is a class that allows you to declare, export, import, and provide your Angular’s objects.
- When you create a component or a directive, then you should declare it in a module.
- When you need to use a component or a directive, you should first export it where you declare it and then import this module in the target module.
- When you need to use a service, and it requires to be provided, you should give it.
We have to use Angular Modules. It allows you to structured your application and scoped the requirement of each directive and component and sub-modules.
The decorator: @NgModule
This decorator marks a class as an Angular module. By default, when you create an application you already have an implemented module: AppModule.
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}Let’s start with the options used here.
imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>
When you create a directive/component, you sometimes need some features exported by another module. So add the corresponding module here. Here, AppModule imports the BrowserModule, which exports the required infrastructure for all Angular applications.
TIPS: BrowserModule exports CommonModule, so no need to import it too.
declarations?: Array<Type<any> | any[]>
Remember, all directives and components must be in module declarations to be used. So, to let Angular knows that our AppComponent exists, we put it here.
Tips: Be careful. A directive/component cannot be declared in 2 modules! Otherwise, you will get an error at compilation time.
bootstrap?: Array<Type<any> | any[]>
It allows telling Angular which component(s) is bootstrapped when this module is bootstrapped. Okay, that’s the definition, but maybe it’s not clear. Please have a look at the main.ts file of our application. There is this line :
platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
...
})It tells Angular to launch the application from our AppModule. In our AppModule, we set our AppComponent into the bootstrap option. So it can be resumed by: Angular, launch the app with AppModule. AppModule, launch the AppComponent on start.
exports?: Array<Type<any> | any[]>
It’s important to understand that you don’t have to export all of your directives/components. So how to know if you have to or not? Just one question: is my directive/component going to be used outside of my module?
If the answer is yes, then you must export it. When is the answer to be no? Sometimes, for a need of clarity or logic, you may have some sub-components to split your main one or internal directives to separate the behaviors.
Conclusion
Hey, now you can create directives, components, and modules. I think it’s ever a significant reached step.
Yes, I know there are others properties: schemas, id, jit, and providers. But to start your developments, you don’t need it, except providers, but it will be explained here :-). If you have any questions, don’t hesitate. Thanks for reading.
