Angular JS
Modules
What is Module in Angular?
• The module in Angular is a very essential part of the application,
which is used to organize our angular app into a distributive manner.
Or we can say that Modules plays an important role to structure our
Angular application
• Angular applications are modular and Angular has its own modularity
system called NgModules.
Each Angular application must have one parent module which is
called app module and it contains the list of different items which are
listed below.
• Components
• Service providers
• Custom modules
• Routing modules
• Pipes
While a small application might have only one NgModule, most
applications have many more feature modules. The root
NgModule for an application is so named because it can include
child NgModules in a hierarchy of any depth.
Angular modularity :
• Modules are a great way to organize an application and extend it with capabilities from external
libraries.
• Angular libraries are NgModules, such as FormsModule, HttpClientModule,
and RouterModule. Many third-party libraries are available as NgModules such as Material
Design, Ionic, and AngularFire2.
• NgModules consolidate components, directives, and pipes into cohesive blocks of functionality,
each focused on a feature area, application business domain, workflow, or common collection
of utilities.
• Modules can also add services to the application. Such services might be internally developed,
like something you'd develop yourself or come from outside sources, such as the Angular
router and HTTP client.
NgModules:
NgModules configure the injector and the compiler and help organize related
things together.
An NgModule is a class marked by the @NgModule decorator. @NgModule takes
a metadata object that describes how to compile a component's template and how
to create an injector at runtime. It identifies the module's own components,
directives, and pipes, making some of them public, through the exports property,
so that external components can use them. @NgModule can also add service
providers to the application dependency injectors.
NgModule metadata does the following:
• Declares which components, directives, and pipes belong to the module.
• Makes some of those components, directives, and pipes public so that other
module's component templates can use them
• Imports other modules with the components, directives, and pipes that
components in the current module need
• Provides services that other application components can use
Every Angular application has at least one module, the root module. You
bootstrap that module to launch the application.
The root module is all you need in an application with few components. As
the application grows, you refactor the root module into feature modules
that represent collections of related functionality. You then import these
modules into the root module.
The Angular CLI generates the following basic AppModule when creating
a new application.
// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './[Link]';
// @NgModule decorator with its metadata
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
NgModule metadata :
An NgModule is defined by a class decorated with @NgModule(). The @NgModule() decorator is a
function that takes a single metadata object, whose properties describe the module. The most
important properties are as follows.
PROPERTIES DETAILS
The components, directives, and pipes that belong to this
declarations
NgModule.
The subset of declarations that should be visible and usable in
exports
the component templates of other NgModules.
Other modules whose exported classes are needed by component
imports
templates declared in this NgModule.
Creators of services that this NgModule contributes to the global
collection of services; they become accessible in all parts of the
providers
application. (You can also specify providers at the component
level.)
The main application view, called the root component, which hosts
bootstrap all other application views. Only the root NgModule should set
the bootstrap property.
NgModules and components
NgModules provide a compilation context for their components. A root NgModule
always has a root component that is created during bootstrap but any NgModule
can include any number of additional components, which can be loaded through
the router or created through the template. The components that belong to an
NgModule share a compilation context.
A component and its template together define a view. A component can contain a
view hierarchy, which allows you to define arbitrarily complex areas of the screen that
can be created, modified, and destroyed as a unit. A view hierarchy can mix views
defined in components that belong to different NgModules. This is often the case,
especially for UI libraries.
Angular libraries :
Angular loads as a collection of JavaScript modules. You can think of them as library
modules. Each Angular library name begins with the @angular prefix. Install them with
the node package manager npm and import parts of them with
JavaScript import statements.
For example, import Angular's Component decorator from the @angular/core library like
this.
import { Component } from '@angular/core’;
import { BrowserModule } from '@angular/platform-browser';
Feature modules:
Feature modules are NgModules for the purpose of organizing code.
As your application grows, you can organize code relevant for a specific
feature. This helps apply clear boundaries for features. With feature modules,
you can keep code related to a specific functionality or feature separate from
other code. Delineating areas of your application helps with collaboration
between developers and teams, separating directives, and managing the size
of the root module.
How to make a feature module :
ng generate module CustomerDashboard
This causes the CLI to create a folder called customer-dashboard with a file inside
called [Link] with the following contents:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class CustomerDashboardModule { }
The declarations array is available for you to add declarables, which are components,
directives, and pipes that belong exclusively to this particular module.
ng generate component customer-dashboard/CustomerDashboard
src/app/customer-dashboard/[Link]
// import the new component
import { CustomerDashboardComponent } from './customer-dashboard/customer-
[Link]';
@NgModule({
imports: [
CommonModule
],
declarations: [
CustomerDashboardComponent
],
})
Importing a feature module :
ng new --no-standalone
src/app/[Link]
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './[Link]';
import { CustomerDashboardModule } from './customer-dashboard/customer-
[Link]';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
CustomerDashboardModule // add the feature module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Rendering a feature module's component template :
src/app/customer-dashboard/customer-dashboard/[Link]
<p>
customer-dashboard works!
</p>
src/app/customer-dashboard/[Link]
exports: [
CustomerDashboardComponent
]
src/app/[Link]
<h1>
{{title}}
</h1>
<app-customer-dashboard></app-customer-dashboard>
