Angular7 - Modules


Advertisements

Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application.

In case you are developing a website, the header, footer, left, center and the right section become part of a module.

To define module, we can use the NgModule. When you create a new project using the Angular –cli command, the ngmodule is created in the app.module.ts file by default and it looks as follows −

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

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

The NgModule needs to be imported as follows −

import { NgModule } from '@angular/core';

The structure for the ngmodule is as shown below −

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

It starts with @NgModule and contains an object which has declarations, imports, providers and bootstrap.

Declaration

It is an array of components created. If any new component gets created, it will be imported first and the reference will be included in declarations as shown below −

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Import

It is an array of modules required to be used in the application. It can also be used by the components in the Declaration array. For example, right now in the @NgModule, we see the Browser Module imported. In case your application needs forms, you can include the module with the below code −

import { FormsModule } from '@angular/forms';

The import in the @NgModule will be like the following −

imports: [ 
   BrowserModule, 
   FormsModule 
]

Providers

This will include the services created.

Bootstrap

This includes the main app component for starting the execution.

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