Angular 2 Vs Angular 1: Lets Checkout the Changes

AngularWeb DevelopmentFront End Technology

Since the inception of Angular JS, it has been widely used by many developers worldwide to build their applications. The JavaScript-based open source framework has become popular in developers community due to its great features such as simple and better way to manage MVC components, usage of JavaScript objects and many more.

That is the Angular 1 with those great features which made Angular JS a popular and widely accepted framework. But as we know nothing is perfect, there is always scope for improvements, based on that philosophy now it’s time for Angular 2 which comes with many improved features.

With its awesome features and high performance, the popularity of Angular 2 is increasing day by day for the developers who used to work in Angular 1 as well as creating a solid support base in the Angular JS community.

Actually, Angular 2 is not an upgrade to Angular 1, it is not a version update from 1.x to 2.x; infact it is completely rewritten which includes the much needed changes.

Angular 2 is written entirely in Typescript and meets the ECMA Script 6 specification, and it is much faster than Angular 1. It is component based and uses Hierarchical Dependency Injection systems which boost the performance as well and it is built keeping in mind the supports for mobile.

So, let’s checkout some key differences of Angular 2 from Angular 1.

Compatibility with More Languages

In Angular 1 we have ECMA Script 5, ECMA Script 6 and Dart, the three language options to choose from and do our work by using any one from them.

While in case, of Angular 2, we have an additional choice of Typescript with ES5, ES6 and Dart. So you have more choices as compared to Angular 1. Typescript makes more intriguing to your JavaScript writing, it includes ES6 and has backward compatibility with ES5. So, you will get all the benefits of ES6 like Reflection, Python-Sale Generators, For or OF loops, Iterators etc.

Focus on Mobile Development

Yes, keeping in mind the increasing demands of mobile applications, Angular 2 supports mobile devices; it was built to handle the performance issues first and also enhance memory efficiency.

Angular 1 was not built keeping mobile supports in mind, actually in 2009 when Angular 1 came to the market, its creators never thought of providing mobile support that time, so it was not built on that perspective.

@Component In, Controller And $Scope are Gone

Developers who are currently using or already worked earlier on Angular 1 are aware about the usage of controllers and $Scope. In Angular 2, there are no controllers and $Scope, they are replaced with “Component” and “Directives”. Angular 2 is completely component-based. Directives are declared as @Directive annotation. They can also be used in components. All the components that are used in the program must be declared and known via bootstrap.

Let’s see some basic usage of components using JavaScript:

import {Component} from ‘angular2/core’;
@Component({
   selector: ‘Hello-app’,
   template: ‘<h1>{{ title }}</h1>’})
   export class AppComponent {
      title = “This is my first application in Angular 2”
   }

Changes in Structural Directives Syntax

The developers who know Angular 1 are very much aware of the usage of structural directives syntax “ng-repeat”, but now in Angular 2, it has been replaced with “*ngFor”.

There are three types of Angular directives –

  • Components
  • Attribute directives
  • Structural directives

As we discussed earlier, a component is actually a directive with a template. And the attribute directives are used to change the behavior or look of the element. For example, the NgStyle directive changes the style of several elements at the same time like making the text bold, italic etc. there are three such built-in structural directives available for our use, they are ngIf, ngSwitch and ngFor.

Let us see the differences in below syntax between Angular 1 and Angular 2

Structural directives in Angular 1

<ul>
   <li ng-repeat=” let player of players”>{{players.name}}
   </li>
</ul>
<div ng-if=” players.length “>
   <h3>You have {{ players.length }} players.</h3>
</div>

Structural directives in Angular 2

<ul>
   <li *ngFor=”let player of players”>{{players.name}}
   </li>
</ul>
<div *ngIf=”players.length”>
   <h3>You have {{players.length}} players.</h3>
</div>

As you have seen in the above examples, ng-repeat is replaced with *ngFor, ng-If is replaced with *ngIf, also “in” is replaced with “of”. Similarly, there are more changes in other syntax’s also, like ng-class is now ngClass, ng-model is now ngModel etc. These changes have happened because of Angular 2 uses camelCase syntax.

Simplified Versioning and Releasing Cycles

It has been a constant demand from Angular JS community for Angular 1 to adopt a proper versioning and releasing cycles, which is heard now. From Angular 2.0.0 they have moved to semantic versioning. Henceforth, it will follow the MAJOR.MINOR.PATCH scheme as per the semantic versioning specification.

Time-based release cycle will be followed so that users can plan accordingly. The users will get notifications much before any API changes.

Changes in Data Binding

You may have aware that Angular 1 uses built-in directives for one-way and two-way data binding. Like in Angular 1 ng-bind is used for one-way data binding and ng-model is used for two-way data binding.

Angular 2 replaced them with [property], as Angular 2 directly uses valid HTML DOM element properties and events so the built-in directives of Angular 1 are no longer required.

Let’s see the differences in syntax.

In case of Angular 1

<input ng-bind = “student.name”></input>
<input ng-model = “student.name”></input>

In case of Angular 2

<input [value] = “student.name”></input>
<input [(ngModel)] = “student.name”></input>

Apart from the above basic differences, there are many other changes which Angular 2 has brought for the developers who have been waited for so long.

  • More support for your animations work in recent version 2.1.0, as it is added :enter and :leave aliases for the common void => * and * => void state changes
  • No need to wait to the server to access lazy loaded content as Router now supports preloading of lazy loaded modules, thus the applications bootstrap quickly
  • Additions of more guides and precise live examples for your reference
  • More improvements in speed and payload size

As we discuss some of the awesome features of Angular 2 that doesn’t mean that we can write off Angular 1 entirely. Angular 1 is still here with its vibrant community support. It is still first choice for many JavaScript developers with plenty of documentation and other helpful resources available online. The way we still like to use lower versions of operating systems, platforms or older browsers to test certain codes and functionality, similarly Angular 1 has its own significance. However, Angular 2 has some great features to grow its popularity, thus it making its way rapidly to the workstations of many developers.

raja
Published on 20-Jan-2020 06:20:43
Advertisements