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

Angular.JS has been adopted by over 1.1 million developers so far (said Brag Green – the Director of the Angular Team). Angular 2 is a fully-compatible and highly powerful framework for developing web application frontend. Now, Angular 2 is supposed to be a perfect solution for the 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 is bound to come up with 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 from 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 frameworks for client-side now. The earlier version of Angular 1. x came up with limited features.

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

Angular.JS 1.3

In this release, the controller is no longer available. You have to make a 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 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 animation issues and introduce a new API for ‘ng-cookies’. The new API for ng-cookies are got, put, getObject, putObject, getAll, and remove. All the cookie 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 to pass dynamically. Using ng-message you can also render an 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 a step ahead of Angular2.0

The most prominent features of this version are:

Application Architecture using angular.component()

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

Multi-slot Transclusion

Multi-slot transclusion ensures the designing of the more complex UI elements. As a 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

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

Angular 2 does not include only incremental updates but the overall framework is rewritten in 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:

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

What’s New in Angular 2?

The blazing updates of Angular 2 include:

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 TypeScript, which ensures 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 detailed code to inject any dependency.

Like, in Angular 1. x, you have to include .$inject with all the detailed code with a 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 the constructor. As a 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 the 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: 

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

New Component Router

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

• 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: 

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

• Reduction in the 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, and 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, and constant, values that are included in ES5. In Angular2, all the things are wrapped up in the ‘classes’, which is the TypeScript syntax.

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 or service, contact us.