Habilelabs-Logo
Blog

Know All About Angular – Why Should You Learn It?

October 14th, 2020 . 6 minutes read
Blog featured image

Angular is a TypeScript-based open-source web application framework developed by Google’s Angular team alongside a community of peoples and corporations.

When we developed Angular applications, it involves writing the code using Typescript, a superset of JavaScript, along with Hyper Text Markup Language (HTML), CSS, etc. This code is then compiled to JavaScript and thereafter the application is rendered in the browser.

It helps developers to make Single Page Applications (SPAs) and gives a wonderful user-experience of using web application.

This blog provides the basic knowledge about the Angular Framework and its various versions. However, most of the blog contains details of Angular Architecture.

Popularity and Angular Versions

Angular is the most widely used JavaScript framework which is used by developers for developing the Web, Mobile and Desktop based Applications. So far, Angular team has released the following versions of Angular.

  • Angular 2.0 – It was released  in September 2016
  • Angular 3.0 – It was not released because this Version was skipped due to mismatch between @angular/core,@angular/compiler and @angular/router libraries.
  • Angular 4.0 – It was released in March 2017.
  • Angular 5.0 – It was released in November 2017.
  • Angular 6.0 – It was released in May 2018. It was also released with Angular CLI 6 and Material 6.
  • Angular 7.0 – It was released in October 2018. It was released with Angular CLI 7 and Material 7.
  • Angular 8.0 – It was released in May 2019. It was released with Angular CLI 8 and Material 8.
  • Angular 9.0 – It was released in February 2020. It was released with Angular CLI 9 and Angular Material 9.It also come up with Ivy Compiler.
  • Angular 10 – This is the latest version released in June 2020 with Angular CLI 10 and Angular Material 10.

Angular is universal because it furnishes the primary view of the application on .NET, Node.js, or PHP for near-instant and behavior driven interpretation in HTML documents.

Angular supplements to show the templates part into code generation that are hugely reformed with today’s JavaScript virtual development tools.

Angular Architecture

Angular Architecture

Eight main building blocks of an angular application which you see in the above image:

  • Modules
  • Components
  • Templates
  • Meta Data
  • Data Binding
  • Directives
  • Services
  • Dependency Injection

Modules in Angular:

In Every Angular Application has a root module named as AppModule and the file name is app.module.ts.

If we want to use another custom module in angular application, then we need to include that particular module in our app.module.ts file. Let’s suppose I have to import FormsModule for using Angular Template Driven Forms, so I include this particular module in our app.module.ts file which is shown in below figure.

app module file

Angular Library:

Angular has quite a collection of JavaScript modules. You can think of them as Library Modules.

Every Angular library name starts with the @angular prefix. You can install all modules from the npm package manager. If you want to import those modules so you have to use the import statement for it. Like you have to import component decorator from the @angular/core library like this:

Components:

Each angular project contains at least one component, i.e. root component (app.component.ts) file and this root component connects the component hierarchy with a webpage document object model (DOM).

Each Component defines the class that contains application data and business logic. This component is associated with the HTML template (app.component.html) file that defines the view to be displayed in the application.

Templates:

All the templates in angular are a combination of HTML with Angular Markup that helps to modify HTML elements before they are displayed on a web browser.

Template directives provide program logic and a binding markup connects your application data and the DOM. There are two types of binding:

  1. Event Binding: It is used for bind events in your app and responds the user in the target environment by updating the data of your application.
  2. Property Binding: This type of binding is used to pass data from component class and ease you to interpolate values from data of your application into the HTML.

Meta Data:

It tells Angular how to process a class. For a component class, the metadata associates it with a template that defines its view. A template combines simple HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display on the web browser.

For a service class, the metadata provides the information Angular needs to make it available to components through dependency injection.

Data Binding:

Data Binding is one of the most powerful features of Angular. Basically, it is used for communication between a template and its components.

 It is necessary because when we write code in typescript, it is compiled in JavaScript and the result is shown to the user i.e. HTML layout.

From Component to DOM

String Interpolation: {{ Value }} : String Interpolation add up the value of the property from the Component.

Property Binding: [property]=”value”

In Property Binding, a value is passed from a component, setting the value of the given element in the user end. It is an example of one-way data binding.

Event Binding: (Event)=”myFunction($event)”

In Event Binding, a value is passed from a child component to parent component, which can be a simple HTML attribute.

Two-Way Binding: [(ngModel)]=”property”

It is the most important type of data binding which is a combination of property and event binding in single notation by using the ngModel directive.

Directives:

When we say that the components in the angular app are the building blocks of an Angular Project. So, we are saying that directives are the building blocks of angular application. Let us discuss with an example of built-in directive, i.e. ngClass.

In this example our text color is blue because it is true.

Services:

When we write code there is a situation when we need some code to be used everywhere on the page. So Services helps to achieve that. With Services we can access methods and properties across other components in the entire angular application. It distinguishes Components from Services to increase modularity and reusability.

Dependency Injection:

Dependency Injection keeps your Component Classes lean and efficient. It does not fetch data from the server. Basically, it is the ability to add the functionality of components at run time.

Each component Consumes the Services that you can inject a service into a component by giving the component access to that service class i.e. you import a particular service into that Component.

Benefits:

Individual Benefits Organizational Benefits
Reduced Coding Angular Support Single Page Applications
Angular Edge Two-way Data Binding
Multiple Job RoleAngular is Modular
Create with Ease Typescript Ease

Conclusion:

Angular is an outstanding, flexible and customizable JavaScript framework. Due to its popularity in the IT industry, more and more developers are turning to it.

The Angular web applications load faster as compared to the other frameworks. It provides several benefits to the developers which is basically the actual reason why some of the best companies around the world use this tool for their projects.

Click here to learn about more about Angular 8-

Author: Rishabh Pachori
Share: