Angular 5 is the latest framework for building web applications using typescript. Recently, angular team is skipped the version 3.x because, router package is shipped with 3.x previously, so instead of putting into 3.x, choose to move to 4.x. Current latest version is 5

Tuesday, 15 November 2016

@NgModule in Angular 2

Initial plan for Angular 2 was drop the angular.module(). Angular team announced the killing of ng.module() during the ng-europe conference.

the syntax looks like this in angular 1.x.
var myApp = angular.module('myModule', []);

Angular 2 has reintroduced the module concept@NgModule decorator is used to declare classes as modules and attach module metadata.

Angular modules are help us to organize the application code into blocks of functionalities and extend the capabilities of external libraries.

NgModule manages the dependencies for the application. You can group the certain features, utilities and business logic etc.

Without @NgModule

@Component({ selector: 'my-component', template: ``, providers: [MyUserProvider], directives: [MyComponent] }) export class MyComponent {}

Without @NgModule
For each component created, you have to declare a relationship it had with other components. Managing  all the dependencies is very difficult. Also difficult to know if any error occur for particular part of the functionality.

With @NgModule

Lets see the below component

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Welcome to</h1>', }) export class MyAppComponent {}

Another component

import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', template: '<h1>Welcome to</h1>', }) export class AnotherComponent {}

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyAppComponent } from './myapp.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ MyAppComponent, AnotherComponent ],
bootstrap: [ MyAppComponent ] })
export class MyAppModule { }
With @NgModule, it is easy to manage the dependencies at single place.

0 coment�rios:

Post a Comment


Online Training

Your Name :
Your Email: (required)
Your Message: (required)

Powered by Blogger.

Recent Posts

Find Us On Facebook

Popular Posts