What is Angular? Features, Advantages & Disadvantages of Angular

Posted on Aug 26, 2019
What is Angular? Features, Advantages & Disadvantages of Angular

The modern-day web development relies heavily on frameworks and libraries. The web is constantly growing technology and technologies related to it grows at a very fast rate. The frameworks and libraries come and go in a very short time. They are also updated at a great pace. But one of the most important frameworks, Angular, had managed to be the prime web framework in recent times. Angular is a core part of MEAN stack web development.

Also Read: React JS Features

What is Angular?

What is Angular

Angular is a javascript web framework which is used for front-end web development. It was developed by Google to encounter the challenges of creating and maintaining single page web applications. Angular is based on the concept of declarative programming that means it allows a developer to write the logic of computations without describing its data flow

The HTML is the template language of Angular but HTML used in Angular is an extended version that allows dynamic manipulations and many other features. Apart from client-side development, Angular provides dependency injections to handle server-side services. 

The first version was called Angular JS and was developed by Google in 2009. It was developed in accordance with certain goals. Angular was intended to become the framework that makes the web development less complicated than ever. Later, on September 14, 2016 Angular2 was released and all the versions further to it is now called as simply Angular. The following are the goals set for the development of Angular.

  • The main goal was to separate DOM manipulation from the application logic. This was difficult because it dramatically changed the way of the code structure.
  • The second important goal was to separate the client-side from the servers-side. The development of client-side and server-side together is very complicated.
  • The structure of development needed to be improved. Everything should be in proper order from the user interface design, through writing business logic, to testing.

Features of Angular

Features of Angular

Being a full-fledged web framework that is used widely in web development, Angular comes with a lot of useful features. Let’s discuss some of the features of Angular briefly.

Two-way Data Binding

Another notable feature of Angular is the two-way data binding. Data binding means establishing a connection between the user interface and the business logic. Angular supports two-way data binding, that means, data is bound from both the directions. Let’s understand two-way binding with the help of a simple example.

There is an input field in which the user enters the username. Below the input field, the data filled by the user is updated in a paragraph. The information filled by the user in the input field is bound to the class where the model exists. The data in the model is updated and rendered to the view in the paragraph. This is how two-way data binding works in Angular. The directive used for two-way data binding is the ngModel.

The following code shows how to use ngModel in the template.

<input type="text" [(ngModel)] = "username">
<p> {{username}} </p>

In the input field, the ngModel directive is used. It equals to the username that is defined in the typescript class.

export class DemoComponent implements OnInit {
 username = '';
}

In the template, a paragraph is defined which displays the value of username using string interpolation. The class in the typescript file has the username variable which is bound with ngModel defined in the input field. Initially, the value of the username is an empty string. That is the reason why nothing appears below the input field. 

As the user input, the data in the field, the username variable in the typescript class is updated and the paragraph of the template is updated as well because the username is presented in the view using two-way data binding.

Directives

Directives in the Angular are the instructions we provide to the DOM. Earlier we learned that the two-way data binding is done through the ngModel directive. ngModel is one of the many predefined directives in Angular. We used the ngModel directive to instruct the DOM that when the data is filled in the input field by the user, update it in the model and then in the view. We can also create our own directive with our own instructions. Directives help a lot in DOM manipulation.

This is how a self-made directive looks in Angular.

import {Directive} from '@angular/core';
@Directive({
    selector:'[appBasicHighlight]'
})
export class BasicHighlightDirective{
    constructor(){
    }
}

The directive needs to be imported from @angular/core. The @Directive decorator is used to create a directive. Observe the @Directive decorator we create above. We defined a selector inside it. It defines the name of the directive. This value given to the selector is specified inside the template to use the directive.

Instead of writing the upper initial code for a directive, we can also use the terminal command.

ng generate directive BasicHighlightDirective

Now, we can define the instructions in the directive. This directive will highlight the text wherever it will be used.

import {Directive, ElementRef, OnInit} from '@angular/core';
@Directive({
    selector:'[appBasicHighlight]'
})
export class BasicHighlightDirective implements OnInit{
    constructor(private elementRef : ElementRef){
    }
 ngOnInIt(){
 this.elementRef.nativeElement.style.backgroundColor = 'red';
 }
}

In the above code, we used elementRef to access the element properties. It needs to pass in the constructor. Now, in the ngOnInIt function, we used elementRef to change the background color of the element to the red. The directive is ready to use now. Let’s see how we can use the BasicHighlightDirective in the template. But first, make sure that BasicHighlightDirective is added into the declarations of the appModule.ts file.

<p appBasicHighlight> This is a basic directive </p>

In the paragraph to use the BasicHighlightDirective, we simply added the name that we specified in the selector. This is how directives are created in Angular.

HTML for User Interface

HTML for User Interface

Above, we learned how to use data binding and directives in Angular. We created templates using HTML. HTML is the basic language used in Angular to create the templates. Using HTML for user interfaces has many benefits.

  • HTML is the first language for any beginner in the world of web development. So even a beginner can start with Angular.
  • HTML is a simple language with a very easy syntax.
  • It is far easy to create user interfaces in HTML rather than javascript.

Testing

Testing is one of the most important parts of application development. Earlier for testing, developers used to create an individual test page and test them one by one. This was very frustrating and time-consuming. But testing in Angular is very simple and far-less time-consuming. An Angular application uses dependency injections to bind everything together. The use of dependency injections helps everything to work as it is meant to be.

Angular in MEAN Stack

Angular in MEAN Stack

MEAN stack is one the most popular software stack which is used to create single-page web sites. MEAN stack consists of MongoDB, ExpressJS, Angular, and NodeJS. It is used for both client-side and server-side development. Main components of MEAN stack are as follows:

  • MongoDB:  a NoSQL database that stores data in JSON format.
  • ExpressJS: a framework that runs on NodeJS.
  • Angular: a javascript framework.
  • 4. NodeJS: an execution environment.

While the MongoDB, ExpressJS, and NodeJS mainly handle the server-side, Angular works completely on the client-side. MongoDB is used to store the data while NodeJS is used to run javascript outside the browser. The express connects the routes and manages the server. 

Advantages and Disadvantages of Angular

Advantages and Disadvantages of Angular

There are reasons why Angular framework is the most popular and widely used javascript framework. Like any other language, it has its own pros and cons. 

Advantages of Using Angular Over Other Web Frameworks

  • The two-way data binding in Angular is very helpful in user interactions. The data is updated as soon as the changes are made.
  • The predefined directives in Angular are helpful in DOM manipulation. We can also create our own directives.
  • Code in angular can be combined together using dependency injections that are useful in testing.
  • Server-side services can also be handled by dependency injections.
  • User interfaces are created using HTML that is very easy to use and understand.
  • Typescript is used to write the logic. It is an object-oriented compiling language that supports static typing.
  • Angular has a strong community. It is supported by Google, IntelliJ IDEA, Visual Studio, and .NET IDEs.

Few Disadvantages of Angular

  • Angular is quite big and fairly complicated. There are many ways to do the same thing. This makes it difficult to choose which one is the best way.
  • The lifecycle methods in Angular are very complex. It takes time to understand them.
  • The directives are useful in DOM manipulation, but creating them is difficult.
  • Angular documentation is not fully sufficient, which makes it a bit difficult to learn Angular.

Conclusion

Apart from Angular, there are many javascript web frameworks like Vue.js, Ember, React Backbone, etc. But the features provided by Angular makes it one of the best in the present time. Angular is used heavily in modern web development as a part of the MEAN stack. Apart from the MEAN stack, Angular can also be used with other server-side technologies like Java, SQL, spring, etc. Angular is vast, which makes it very complicated. The use of directives, injections, and few other techniques might be complicated but they are very useful in developing dynamic single page web applications. It takes time to understand Angular but there is no doubt that Angular is one of the best frameworks in the modern web.

Angular, along with React.js, has become the most front-end development frameworks in recent times. As mentioned, these have led to stacks like MEAN and MERN along with Node.js which helps in building complex web applications. But however, these are not only used in complex applications, but also in various other types of projects which include WordPress and Woocommerce plugins. At Acowebs, we take utmost care in ensuring that the plugins that we build are not only of a high-class UX but also equally good in terms of performance and we leverage front-end frameworks like Angular and React to achieve this. Our plugins, Woocommerce bulk discounts ,as the name suggests, which is for applying bulk discounts based on various parameters like total cart value, total number of products, certain category etc and Woocommerce checkout manager which helps the website owners in customizing the checkout form fields and Woocommerce product addons which is basically to help the website owners to add custom fields in the product detail page in the Woocommerce store (There’s a free version of this plugin aka  Woocommerce custom fields which is available on WordPress.org for free download), all uses front-end frameworks like Angular and React.js, which helps us stay ahead of our competitors, by offering a better customer experience.

WRITTEN BY
Jamsheer K

Jamsheer K, is the Tech Lead at Acowebs and it's parent company Acodez. He mostly writes about Wordpress, WooCommerce and other programming languages and his writing normally comes from rich and hands-on experience in these technologies.