# 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.

{% code title="app.module.ts" %}
```typescript
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)
})
```
{% endcode %}

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.

{% hint style="info" %}
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.
{% endhint %}

## **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:\


{% code title="app.module.ts" %}
```typescript
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)

```
{% endcode %}

1. **AppModule** is the standard name for the root module's class declaration.&#x20;
