Angular Tutorial:

Angular 2 – Architecture

Components of Angular Architecture /

Angular Terminology

Angular is completely based on modular programming, Code is divided in reusable components. There are many components and terminology in Angular that you must need to know what they are and what their meaning.

There are basically 8 building blocks of angular 2. These are-

  1. Modules
  2. Components
  3. Templates
  4. Metadata
  5. Data binding
  6. Directives
  7. Services
  8. Dependency Injection

Now Lets understand each one of them, one by one.

Components of Angular Architecture

 

1. MODULES?

In Angular, a module is a mechanism or process to bind all components, directives, pipes and services that are inter related to each other, in such a way that can be combined with other modules to create an application.

2. Components

As the name implies a component is basically a typescript class with HTML template, that is used to show an element on the browser screen. Every components has some properties and by using them we can manipulate how the element should look  and behave on the screen. We can manage interaction using this properties.

You  can create a component, destroy and update according to application need, as the user moves in the application. Life Cycle hooks are the modules that we use for this purpose. Like ngOnInit() and so on. 

3. Templates

A template is the view part of any component. It Show’s you component output to browser screen. You can define a template in inline style as well as in a separate file in any component.  You can extend the HTML vocabulary of your templates with components and directives that appear as new elements and attributes.

4. Metadata

In a One line “Metadata tells Angular how to process a class.” Metadata is used to decorate a class so that it can configure the expected behavior of the class. Means Metadata provide additional class information that describe the nature of behavior of a class.

5. Data binding:

Data binding is a technique that binds data from view(User or Front-end ) with component(Logic Block or back-end). Means how data flow from user input and what data comes when user perform some action.

There are three types of data bindings in Angular 2, they are as follows:

  1. Interpolation
  2. Event Binding
  3. Property Binding

We will separately understand them in our next tutorials.

6. Directives

In a One Line “An Attribute directive changes the appearance or behavior of a DOM element.”

A directive is a custom HTML elements that are used to extend the power of normal HTML. Angular 2 has the following directives.

  1. Components— Directives with an HTML template.
  2. Structural Directives— It changes the DOM layout by adding and removing DOM elements.
  3. Attribute Directives— Change the appearance and  behavior of an element, component, or another directive.

7. Services

A service is created and used when a we want use common functionality to various modules. Services are a great way to share information among classes that don’t know each other. You can create a common service and inject that service in to many places.

 

8. Angular Dependency Injection

Dependency injection is one of biggest features of Angular. Dependency Injection (DI) is a technique to create objects that depend upon other objects. Dependency injections allows us to inject dependencies in different components across our applications, without needing to know, how those dependencies are created.