Angular 2 - Modules


Advertisements

Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application. Let’s inspect the code which gets added to the demo application.

In Visual Studio code, go to the app.module.ts folder in your app folder. This is known as the root module class.

Root Module Class

The following code will be present in the app.module.ts file.

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 { } 

Let’s go through each line of the code in detail.

  • The import statement is used to import functionality from the existing modules. Thus, the first 3 statements are used to import the NgModule, BrowserModule and AppComponent modules into this module.

  • The NgModule decorator is used to later on define the imports, declarations, and bootstrapping options.

  • The BrowserModule is required by default for any web based angular application.

  • The bootstrap option tells Angular which Component to bootstrap in the application.

A module is made up of the following parts −

  • Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.

  • Export array − This is used to export components, directives, and pipes which can then be used in other modules.

  • Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

Useful Video Courses


Video

AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma

Video

Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma

Video

Step By Step Angular For Beginnners

11 Lectures 7.5 hours

SHIVPRASAD KOIRALA

Video

Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain

Video

Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac

Video

JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac

Advertisements