Angular App Development

What’s new in AngularJS 2.0 in just 2 minutes

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.

Need help?

We are Perfomatix. We specialize in building highly scalable APIs and Mobile apps and we also have strong expertise in IoT appsVirtual Reality apps, and Augmented Reality appsGet in touch with us to find out how we can help in shaping your disruptive idea into a prototype, MVP and finally into a killer product. Visit our success stories section to find out more about some of the startups which made it big with us.