# 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.<br>
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.)<br>
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:<br>

{% 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://softstack-factory.gitbook.io/mean-stack/angular/wk3/intro-to-angular/angular-architecture/modules-explained.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.