2.2: Modules

As stated earlier, Angular is component-based. More specifically, Angular is modular and this modular system is called NgModules. The NgModules' main job is to declare each component that you have created and group them in one place. It can import functionality created by other NgModules, and export specific functionality for use in other NgModules.

All Angular apps have a starting NgModule, the root module, which is called AppModule. This file is located in the app.module.ts file. Here is that file as it created by the Angular CLI below:

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 break this down.

• Imports - Modules whose exported classes are needed by components that are declared in the module

• Declarations - The components, directives, and pipes that belong to the module

• Providers - The global collection of services that become accessible in all parts of the app

• Exports - Declarations that should be visible and usable in other components of NgModules

• Bootstrap - The root app component that Angular creates and inserts into the index.HTML page. This is the main application view.

Moving further from this, declarations are in local scope and providers are in global scope. So, if you want to use a component that you have created outside of its current module, it would have to be exported because it has private visibility due to its scope. Providers and servers are global, so they should be able to be injected anywhere in our app.

Component and provider scope is important to know. Often times, you will need to import more modules into your application. Keep in mind each module that needs the component will have to have the component imported in it. For modules imported for services, it will only need to be imported once inside the first app module.

adapted from Angular Documentation and Understanding Angular modules(NgModule) and their scopes by Cyrille Tuzi

NEXT SECTION

2.2: Components