What's the difference between an Angular component and module

The applications in Angular follow modular structure. The Angular apps will contain many modules,
each dedicated to the single purpose. Typically, module is a cohesive group of code which is 
integrated with the other modules to run your Angular apps.
A module exports some classes, function and values from its code. The Component is a fundamental block of Angular and multiple components will make up your application.
A module can be a library for another module. For instance, the angular2/core library which is a primary Angular library module will be imported by another component.

A component can be created using @Component decorator that is part of @angular/core module.
import { Component } from '@angular/core';
and to create a component
@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';

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.

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 the other application components can use.

A module can be created using @NgModule decorator.
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }

Basic  example of  angular component 

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // @NgModule decorator with its metadata @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

A module is collections of  Component ,services , directives ,pipes  etc

Component is building blocks of  angular  applications with associate template .
Denoted   by ngModule
 Denoted by @Component
 Angular app  contains many modules  each dedicate to  single purpose.
 Each modules  can have many Component or subcomponent .

 This   is     architecture   of    Angular app.

What's the difference between an Angular component and module What's the difference between an Angular component and module Reviewed by Mukesh Jha on 8:13 AM Rating: 5

No comments:

Add your comment

All Right Reserved To Mukesh Jha.. Theme images by Jason Morrow. Powered by Blogger.