Overview Of Angular - Part Two

Introduction

This article is in continuation of Overview of Angular – Part One. Here, we are going to see the Angular Essentials which are the basic building blocks for building a web application. In previous part, we have seen an overview of Components, Modules, Template, and Metadata. Here, we are going to have an overview of Data Binding, Directives, Dependency  Injection, and Services.

Data Binding

Data binding is a process of binding the data between the source (object) and HTML controls. It’s a binder which sits between the object and HTML controls and coordinating the data values. There are four types of binding.


Figure 1.0 DataBindings

Interpolation

It just displays the component value or property within the <div> tag or <li> element.

Property Binding

It passes the propery value from one component to another component.

Event Binding

It triggers the component’s method when the user clicks button or something.

Two-way Binding

By using the ngModel directive, property value from component flows to the HTML controls, and if any changes made to the HTML controls, flows back to the component. I am not going to demonstrate with source code here; probably, I will write about it in the next article.

Directives

What's the general English meaning of Directive?

Angular Directives

Ans: An Authoritative Instruction – which means that an instruction given to someone in an authoritative way. In other words, we can also say that this instruction (task) has to be executed immediately as we need to bring important changes to the project. In Angular, Directives are the instruction which modifies the DOM (Document Object Model) to change appearance, behaviour, or layout of DOM elements. DOM is a representation of a web page which can be modified with a scripting language, such as JavaScript. In a web page, when Angular renders the template, it manipulates the DOM according to the instructions given by Directives. So, Angular has the capability to change the DOM behaviour using Directives.


Figure 1.1 DOM manipulation using Directives

There are three types of Directives,

• Attribute directives
• Structural directives
• Components

Attribute Directives

Attribute Directives signal Angular that the appearance or behaviour of DOM elements within the directive may change depending on certain conditions.

Structural Directives

Structural Directives signals Angular that the structure of the DOM elements within the directive may change depending on certain conditions. Angular has built-in structural directives such as ngIf, ngFor, ngSwitch.

Components

@Component itself is a directive as it contains template which is an HTML form content. As I am covering only an overview in this article, the details or source code explanation about the Directives will come up in my upcoming articles.

Dependency Injection

Dependency Injection is really an interesting topic. I really love it; I hope, you  do too.

A Class may have one or many dependencies to carry out its operations. For ex: LogError. A Class has to be dependent upon a LogError object to log the errors and logs. Without LogError, this class wouldn’t be able to log the error, it is completely dependent upon the LogError object. But, who will supply that dependency to the class? Should the caller have to instantiate and supply? No.

In Angular, the Framework will supply required dependencies to the class when instantiating the component. The only thing we need to educate the framework about is the list of dependencies needed to create an instance of a particular class or component. In simple words, Dependency Injection is a way to supply the required dependencies to a component.

Let's have a look at this source code.



The EmployeeComponent requires AllowanceObj,SalaryObj,PersonalDetObj dependencies for creating an Employee object . When Angular creates a component, it checks with Injector to figure out the list of dependencies to create an object. The injector will look out for its container and return the required dependencies. If a requested dependency is not in the container, injector creates one using provider and adds it to the container before returning the dependency to the Angular. When all requested dependencies have been returned, Angular can call the constructor with those dependencies as arguments. This is called Dependency Injection. What are all the steps involved in creating Dependency Injection? How should I create Injector or Provider? I will explain you in upcoming articles with source code.

Services

Services are set of functions designed to provide a specific service. A service may be a Logger service, data provider service, Backend Service. Any class can be a service in Angular. Components are the consumers of the service. How should I configure a service in Angular? What are all the steps involved? I will explain you in my upcoming articles with source code.

Summary

Modules, Components, Metadata, Directives, Template, Databinding, Dependency Injection and Services are the building blocks of an Angular application

• DataBinding – It’s a process to bind the UI controls and the Javascript Objects.
• Directives – It is an instruction which modifies the DOM to change the appearance or behavior of DOM elements. 
• Dependency Injection – It’s a way to supply the required dependencies to the component.