AngularJS 2 is a framework mainly focused on the development of mobile apps due to challenges in mobile like performance, load time, etc. AngularJS 2.0 is still in design and prototyping stage. Since it is in the development stage, some of the currently mentioned features will be differently or not at all in the final product.

Concerns and Controversies

In ng-conference there was no mention of a migration path to version 2.0.
No Backward compatibility, the jump to 2.0 version will lead to broken Angular 1.3 apps.

AngularJS 2 is mainly designed for future and targets modern browsers and using ECMAScript 6.

Web Browsers includes Chrome, FireFox, Opera, Safari, and IE10/11.
Mobile Browsers includes Chrome on Android, iOS 6+, Windows Phone 8+ and Firefox mobile.

What is new in AngularJS 2.0

1. ECMA Script 6 + A

AngularJS 2 is already being written in ES6. AtScript is a superset of ES6. Currently, ES5 runs in almost all browsers.
Traceur compiler is used to generate ES5.
Uses TypeScript’s type syntax to generate runtime type assertions instead of compile time checks.
AtScript is not compulsory. ES5 is still possible if you don’t want to upgrade.

2. Change Detection is Faster

In Angular JS 1.2, it waits for the browser native change detection.
Object.observe() – A low-level API that lets you add a listener to be notified when a JavaScript object changes state.
Object.observe() will make this faster when becomes available in Chrome M35.
Logging

Angular JS 2.0 will provide high-resolution timing details of where time gets spent in your application and directly support this through a new Angular-wide logging service called diary.js.

Change Detection Algorithm

It keeps track of fields to check as Record data structure.
When reporting changes it returns a list of Records which have changes

Modular

AngularJS 1.0 – Features were in a single package.
This can make a big difference on mobile devices, not much for desktop apps.
Goal – Every piece of AngularJS should be optional, replaceable.

3. Dependency Injection

Dependency Injection was one of the key features which differentiates AngularJS and other client side frameworks making components reusable, maintainable and testable.

Its implementation was complex with problems in Angular 1.x.
In Angular JS 2.0, DI is made less complex and more capable at the same time.
Added missing features such as child injectors and lifetime/scope control.

4. Annotations

AtScript provides with tools for associating metadata with functions.
It facilitates the construction of object instances by providing the required information to the DI library.
Checks for associated metadata when creating an instance of a class or calling a function.
It will be also easy to override parameter data by supplying an Inject annotation.

5. $scope

$scope object is removed in Angular JS 2.0
The “scope” concept will still be bound to the directive.
Having different kinds of scope(isolated and non-isolated) can easily lead to issues.
The new DI has instance scope control.
If you want the DI to always create a new instance of a class, every time you ask for one, you can just do this:

@TransientScope

export class MyClass { ... }

6. Dynamic Loading

Dynamic feature is a feature missing from the current version of Angular.
Angular 2.0 will let developers add new directives or controllers on the fly.
When you compile a template, you not only provide the compiler with a template, but you also provide a Component definition.
The Component definition contains metadata about what directives, filters, etc. were used in the template. This ensures that the necessary dependencies are loaded before the template gets processed by the compiler.

7. Templating

Template compilation process will be asynchronous in Angular 2.
The module loader will load dependencies by simply referencing them in the component definition.

8. Module

The angular#module() is removed in Angular 2.0 and uses ES6 modules instead.

9. Directives

In Angular 2.0 there will be mainly 3 types of directives.

Component directives

These will create reusable components by encapsulating logic in HTML, JavaScript, or an optional CSS style sheet.

Decorator directives

These directives will be used to decorate elements (for example showing/hiding elements using ng-show/ng-hide or adding a tooltip).

Template directives

These will turn HTML into a reusable template. The instantiating of the template and its insertion into the DOM can be fully controlled by the directive author. Examples include ng-if and ng-repeat.

Perfomatix |AngularJS Development Company

Perfomatix is a leading angularJS development company, providing product engineering services for large and small businesses worldwide.

Would you like to hire angular developers?

Feel free to drop in a note for us right now. Talk to our experts now and let us be your innovation partner!

Fast Forward Innovation with Perfomatix.

What's new in AngularJS 2.0 in just 2 minutes