Lesson Tuesday

Every Angular application contains at least one module called a root module. Modules are used to organize areas of an Angular application into cohesive areas of functionality.

Modules

Imagine that a large Angular application is like a large company. Modules are like the different departments in this company. A huge company has many, many different departments while a small one may only have one or two. Departments are physically organized into their own offices (or even their own buildings). And while each works for the same company, they have a unique, cohesive purpose and require their own special equipment to work toward that purpose.

A module may contain multiple components (and other stuff we'll learn about later like directives, pipes, and services). These are similar to the equipment and employees that belong to a specific department of a company. A component, on the other hand, can only belong to one module, except for a few very advanced special circumstances. This is similar to how an employee generally belongs to only one company department outside of a few special circumstances.

Root Modules

The root module in our application is like our "company headquarters." This file is responsible for loading other parts of our app and any Angular-specific dependencies. Essentially, the root module instructs Angular how to assemble our application. For now, we'll only use a single, default root module.

Let's take a look at the src/app/app.module.ts file that Angular CLI generated for us:

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let's start with the import statements at the top. This style of import statement should be very familiar to you now after the past few weeks of JavaScript.

  • BrowserModule imports code necessary to run our app in the browser, including built-in directives that allow us to add things like conditionals and loops to our components. We'll explore these soon.
  • NgModule imports general Module code from the Angular framework's core.
  • AppComponent is our application's root component; Angular CLI automatically creates our root component for us. We'll learn more about the root component in the next lesson.

As our application grows in complexity, we will add many more import statements. Every component that's part of this module will need to be imported. In addition, we're only importing very basic core Angular functionality here; that keeps our application sleek and streamlined. We'll soon need to import more functionality as well, too.

Module Decorator

Next, app.module.ts has a @NgModule decorator. We'll learn more about decorators in the next lesson. @NgModule informs Angular that this is a module. It includes declarations, imports, providers and bootstrap.

app/app.module.ts
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
  • imports 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.

  • 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. We'll soon be adding more components. When we generate new components using the CLI, they'l automatically be added here. (Things called pipes, directives, and services can also be included. We'll address this later, when we learn about these other Angular objects.)

  • 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 away, that component must be available as soon as the application boots up.

  • Don't worry about providers just yet. We'll be learning about those in a future lesson!

Class Declaration

The root module also requires a class declaration. We'll learn more about class declarations in the next lesson. Here's our root module's class declaration:

app/app.module.ts
...
export class AppModule { }

We'll leave the class declaration empty.

For now we'll leave our root module alone. However, when we need to add core or extended functionality to our Angular application, we'll be doing so here.

In the next lesson, we'll take a look at the root component of our application.