Angular 2 vs. Angular 1.x: What’s New in Latest Release

By January 12, 2017 AngularJS, MEAN, Web No Comments
angular-2-vs-angular-1: what's new in latest Release

Angular.JS has been adopted by over 1.1 million developers so far (said by Brag Green – the Director of Angular Team). Angular 2 is the fully-compatible and highly powerful framework for developing web application frontend. Now, the Angular 2 is supposed to be a perfect solution for web front-end.

As Angular.JS has been the most popular framework in the market since its first release. Angular.JS community works with leaps and bound to come up with the better solutions. As the web evolved, so does Angular.

Angular 1.x to Angular 2: Version Timeline with Features

Angular is releasing its latest updates time to time. In this article, we are going to discuss how Angular is leading the market with incremental updates in its newer versions.

Angular 1.0 to 1.2

Angular is an open source client-side framework; it has its origin from Google Inc in October 2010. It was an open-source project, which is one of the top development framework for client-side now. The earlier version of Angular 1.x came up with the limited features.

The tenure within Angular 1.0 to 1.2 was experimental. Version 1.2 is the result of several version on the 1.1 branch and has stable API.

Angular.JS 1.3

In this release, the controller is no-longer available. You have to make the Separate function for that controller. The major feature update in this version was ‘Angular Expression Parsing’ in which they updated that function bind, call, or apply  a function in an angular expression.

Angular 1.3 came up with the updates in most of the deprecated properties that were used in the previous versions. Like, for example, $interpolate.

Angular 1.4

The main purpose of this version is the fixing of animation issues and introducing a new API for ‘ng-cookies’. The new API for ng-cookies are get, put, getObject, putObject, getAll, remove. All the cookies data can be accessed using these methods explicitly.

This version helped developers to develop a more enticing way to fix timing issues in animation. They delivered a most versatile way of fixing the animation via $animation. That results in fixing the animation issues and fixed many bugs . The ng-message was introduced to allow the message passing dynamically. Using ng-message you can also render error message.

Angular 1.5

This version came up with the latest security checks and bug fixes. The other main factor that matters is the performance of your website. It is considered as a step ahead Angular 2.

The most prominent features of this version are:

  • Application Architecture using angular.component()

Component was introduced  in Angular 1.5. They are easy way to configure and promote the best practices.

  • Multi-slot Transclusion

Multi-slot transclusion ensures the designing of the more complex UI elements. In result, it reduces the boilerplate.

  • One way Binding in Isolate Scope

You can use one-way data binding using ng-bind.

  • Introducing Life-Cycle Hooks

Angular 1.5 came up with the new lifecycle hook for the directive controller.

  • Relying on ES6 Syntax

The revised syntax of Angular 1.5 is ES6 which includes advanced syntax as array and class functions.

Angular 2.x

The Angular.JS cracked its latest release on September 16, 2016. It was in its beta version few months back. In my previous article, I wrote about the updates about Angular 2 and now, it’s going to rock in the market.

Angular 2 does not include only the incremental updates but the overall framework is rewritten in the Dart and TypeScript which is the super subset of ES5 and ES6.

Why Angular 2

Angular 2 is the most advanced version with the following features:

  • Fast and built-in modern web standards and practices.
  • Powerful clean code with templating syntax.
  • Features enhancement in latest version.
  • It’s easy and very quick to start with Angular 2.
  • It has built-in support for almost all of the browsers including Firefox, iOS, (Safari), Internet Explorer(version 9,10, 11, IE Edge)n and Chrome.
  • Massively, larger scale applications like Google Adwords, are built on Angular 2.

What’s New in Angular 2

The blazing updates of Angular 2 includes:

  • One-Way Data Binding

Now, you don’t have to use any directive for one way data binding, Angularjs 2 came up with one-way data binding by default.

  • TypeScript – Default Language

TypeScript will be the new default language of Angular 2.x. The overall framework is rebuilt with the TypeScript, which ensures the enhanced code completion along with the advanced refactoring tool.

The decorator syntax also helps in developing useful code. You can work in ES5 and ES6 formats that do not support type.

  • Dependency Injection

As in previous versions of Angular.JS, you don’t have to add a detailed code to inject any dependency.

Like, in Angular 1.x, you have to include .$inject with all the detailed code with set of strings. Now, in Angular 2 you just have to use @injectable() in service class and everything is in class so that it can be achieved via constructor. In result, it saves you from any hacky code syntax and also it is time saving.

  • No Controllers Now

In an earlier version of Angular.JS, you have controllers, and you have to bind via ng-controller’. That function controller will be registered using angular controller method.

Now in Angular 2, the ‘controllers’ are replaced with the ‘components and directives’.

That component is defined by @component with decorator and using selectors like:

import {Component} from ‘angular2/core';

@Component({

 selector: ‘my-component’

})

<my-component>

</my-component>

You can call it anywhere, you want in your code.

  • New Component Router

The blazing Angular 2 has new component router that routes and communicates with overall component in your application as:

@Route Config([{

path: ‘…’, component: ‘componentName’ as ‘componentName’

}]);

  • Bootstrapping

The new feature of Bootstrapping asynchronously loads the modules and it will load initial data on your web page very quickly.

The only thing you have to do is simply add

import {bootstrap} from ‘angular2/platform/browser';

It loads the all relevant  data, and you don’t need to pull the entire application.

  • Reduction in Number of Directives

Almost 40+ directives have been eliminated in Angular 2. Angular 2 built-in directives especially the event binding like ng-click, ng-focus, ng-blur has been replaced with the properties wrapped in inner HTML in parenthesis like (click), (blur), (focus), (keyup).

So, you don’t need to worry about remembering all the directives. Angular 2 has cut down the load.

  • Way of Defining Service

In Angular 1, you have to add factories, services, providers, constant, values that is included in ES5. In Angular2, all the things are wrapped up in the ‘classes’  which is the TypeScript syntax.

Angular 1.x vs. Angular 2

Let’s have a quick review on some of the comparison points. The included points are tested at the time of writing this article.

Angular 2 vs Angular 1.x

Conclusion:

Including these features, there are many other updates in the latest version of Angular.JS. Like, it came up with the JSPM and WebPack(which is the modular bundler) support. So, get hands on experience with Angular 2. If you want to experience how things work, check out the demo code.
We at Vizteck, are highly inspired by the new version of Angular.JS. Almost, all of our project front-ends are built on Angular. For any query and service contact us.

 

Author Uroosa Sehar

More posts by Uroosa Sehar
mautic is open source marketing automation