Modularizing code is an effective way to organize an application no matter the technology. It allows for ease of maintenance, division of concerns and testing your code. Angular accomplishes this with NgModules.
NgModule
NgModules allow you to configure the injector and the compiler for your application. An NgModule is denoted as such by the @NgModule decorator.
@NgModule Decorator
The NgModule decorator contains information on how to compile the application. It tells the app how to compile the template and how to perform the injection at runtime. NgModule makes the connection between its directives, components, etc. to external components that rely upon those items.
Exports Property
NgModule uses an export property to make its functionality public so external components can use them.
Services
NgModule also enables service providers to be used by the application. This allows for further ease of maintenance and separation of concerns.
Here is a trimmed down (for the sake of space…your production NgModules will be ‘beefier’) version of NgModule…
// Various import statements to pull items from external libraries into the module
import { BrowserModule } from '@angular/platform-browser';
// The decorator
@NgModule({
// Pulling the imported library functionality into the module
imports: [
BrowserModule
]
/ The declarations of the component the module uses
declarations: [
AppComponent
],
// The service providers the module uses
providers: [
AccountService
],
bootstrap: [AppComponent]
})
// The export property so external components can use the module
export class AppModule {}Happy Coding!
Clay Hess
