Architecture of Angular2


In this blog we are going discuss about angular2 architecture. Here we will discuss in brief about the building blocks that comes under Angular2.

Getting Started

In my previous article that listed in the below list, we have discussed about Angular2, the goal of Angular2 and how Angular2 is difference from AngularJS.

  1. Overview of Angular2
  2. Goal of Angular2
  3. Difference Between Angular2 and AngularJS
Now before starting demonstration of Angular2, it is necessary to understand the architecture of Angular2. Hence in this article we will discuss the architecture of Angular2.
Angular2 architecture consists of 8 building block, the name of building block is listed in the below.
  1. Modules

    A module is nothing but blocks of code that is created for special proposes. Module exports the value of something from the code such as a .Net class. A module exports values, functions and classes that other module uses it.

  2. Components

    A component is nothing but like controller, it is a class with templated. It comes between view and model which knows itself how to render view and configure dependency injection to display logical data.

  3. Templates

    The view of the component is defined through templates. Templates are basically the HTML we use to show on our page, it describes how the component is rendered on the page.

  4. Metadata

    Metadata tells Angular how a class should be processed on the screen. It is a way of processing the class. Component tells Angular that the custom component (component is nothing but class) that you have built is a component. The decorator is used to attach component with Typescript.

  5. Data binding

    Data binding is measure building blocks of any application or framework architecture, Angular2 support Data Binding. Data binding is used to display component property in view. You can say Data binding is the synchronization of data between the model and view components.

  6. Directives

    Directive helps us to add behavior to the DOM elements. The directive is a class which contains metadata which will be attached to the class by the @Directive decorator. Template changes the DOM according to Directive while rendering.

  7. Services

    Services are JavaScript functions that are responsible for doing a specific task only. Angular services are injected using Dependency Injection mechanism and include the value, function or feature which is required by the application. There nothing much about service in Angular and there is no ServiceBase class, but still services can be treated as fundamental to Angular application.

  8. Dependency Injection

    Dependency Injection is a design pattern that passes an object as dependencies in different components across the application. It creates a new instance of class along with its required dependencies. The Dependency Injection is stimulated into the framework and can be used everywhere.


Hope you have got little ideas about basic building blocks of Angular2 architecture. Please give like or comment if this article helps you.

Kailash Chandra Behera

1 comment:

  1. Achieving a proper steadiness between provide chain effectivity and resiliency can help organizations address—and often sense—potential risks. Rather than enter external negotiations to vary customer and vendor cost phrases, consider strengthening process execution to bolster operating cash. But many smaller gambling startups attempting to get 카지노사이트 in on the gold rush don’t know they need an anti-money-laundering program, Mr. Martin mentioned. Online gambling is booming throughout the united states and compliance specialists warning that it creates opportunities for criminals to launder money or participate in other financial crimes. News Corp is a global, diversified media and knowledge services firm targeted on creating and distributing authoritative and fascinating content and other products and services.