Modules Explained

Module Decorator

The @ symbol in javascript is called a decorator. There are multiple types of decorators so angular knows what type of file you are creating. Luckily angular creates the proper decorator for us when we use the angular cli to generate components and other angular file types. An angular module is created with the @NgModule decorator. This tells Angular that the code following this decorator is a module.

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports: [ BrowserModule ], (1)
  declarations: [ AppComponent ], (2)
  bootstrap:    [ AppComponent ] (3)
})

1. imports: (the one directly below @NgModule) is an array of other modules and content this module requires. Here, we import a built-in module called BrowserModule. Note that this imports array differs from the import statements at the top of the file. The import statements at the top import functionality from the Angular core. The imports array under the decorator imports other pieces of our application we want included in this module.

2. declarations: is an array of all components that will reside in this module. Because we only have one root component, we only list AppComponent here. (Things called pipes, directives, and services can also be included. We'll address this later, when we learn about these other Angular objects.)

3. bootstrap: In programming, the term "bootstrapping" refers to launching an application with the minimum required resources. It has nothing to do with the front-end framework Bootstrap that we use to style our sites. Here, bootstrap is an array of components required immediately upon launching the application. Because our page will use our root AppComponent right on the index, that component must be available as soon as the application boots up.

The above terms are just to help give you some reference, you do not have to write you own decorators or even interact with them. Angular will do all the heavy lifting and configuring for us.

Class Declaration

The root module also requires a class We'll export the class AppModule at the bottom of the file. It will remain empty for now:

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { } (1)

1. AppModule is the standard name for the root module's class declaration.