Architecture of Angular2

Introduction

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 blocks, the name of the building block is listed below.

1. Modules
   

   A module is nothing but blocks of code that is created for special proposes. The 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.

Summary

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

Thanks