Angular2 And It's Brand New Features

Angular2

About 2 year ago, Google and angular team together made the decision to drastically change the tremendously popular Angular1.x framework(https://docs.angularjs.org).They decide to make better the framework by reducing the learning curve and providing performance enhancements.

Angular 2.0 beta version was officially announced in 15 December, 2015. This version do not have complex major update, rather a rewrite of the entire framework and will include breaking changes!.For more information please visit: https://angular.io/ 

Why Angular2?

Let’s briefly consider the philosophy behind the new version. Angular 2.0 development was started to address the following concerns:

1)Typescript:

The new version of angularjs written in EC6(JavaScript next version) and uses typescript rather then plain java script. The previous versions of ECMAScript defines everything as a prototype. Now ES6(next JavaScript version) allow classes , which make code more readable as Rails, java code.

Typescript is an extension of ECMAScript, in fact:

Typescript = ES6 + Types + Annotations

Because Angular2 uses Typescript, the functionality of Typescript itself and its libraries can be used. Angular2 is just a framework which couples different features. Other libraries can easily be used. For example:

MongoDB interface because it already has a connector in Typescript.

Web-sockets is another feature that is not directly something from Angular2, but it can easily be implemented and support has been added to the specification.

2)Performance:

Angular team keep in mind the better performance target while working on that, So they make some changes or can say lot of changes in existing angular as:

1)Goodbye to Controllers & $scope:

Even though ‘$scope’ has been replaced by “controller as” as a best practice since Angular 1.2, it still lingers in many tutorials. Angular 2 finally kills it off, as properties are bound to components. Instead of using controllers, Angular2 bet on component-based UI, similar to ReactJS. The core team dropped controllers but added components and kept the directives.

Angular 1.x:

angular.module(‘example’) .controller(‘ExampleCtrl’, function($scope) {

  $scope.name = “John Smith”;

});

Angular 2.0:

@Component({ selector: 'example' })

@View({ templateUrl: './components/example/example.html' })

export class Example {

  constructor() {

    this.name = “John Smith”;

  }

}

$scope has removed in Angular 2.0 in favor of ES 6 classes. It removed due to late change detection.

2)No Two-Way data-binding:

  Removing the two-way data-binding leads to:

  ~ More explicit data-flow

  ~ No circular dependencies between bindings.

3) Web Components (Component Based UI):

Generally WC are set of standard that allow for the creation of reusable widgets or components in web documents and web applications.

Angular2 is adopting a component-based UI, a concept that might be familiar to React developers. The Angular 1.x controllers and directives blur into the new Angular 2 Component.

5) Ultra Fast Change Detection:

As currently angular 1.x uses $scope which sometimes unable to digest the changes and apply over view.So as I describe above angular2 team remove the $scope and they took a new concept, which generate JavaScript classes and implement this change detection mechanism, instead of using method calls.

6) Mobile First:

Angular was implemented in frameworks like Ionic in a hard manner which was detrimental to the user’s experience and performance of the application in general.

With all this terrible experience, Angular 2 was designed to be better and ready for any thing coming its way that is mobile oriented.

7)Errors in the Template Expressions:

One thing I do not really like about angularjs 1.x is appropriate error messages. The errors, which you were supposed to get were omitted and you weren’t aware that your code actually doesn’t work. Well, in Angular2 we will get run time errors in such cases.

Angular 2.0 will contain a logging service called diary.js—a super useful feature which measures where time is spent in your application.

Conclusion:

Angular2 is a brand new framework, which is not backward compatible with AngularJS 1.x. It is implemented in Typescript but you don’t have to use it if you don’t want to. It implements some of the ideas from ReactJS, mostly the unidirectional data flow, which makes it work great with the flux architecture. It is on top of web standards (which is a big bonus compared to other framework) and takes advantage of some of the web components’ APIs. It will be much faster and lighter compared to AngularJS 1.x and will be supported by the modern browsers with polyfills. Currently no stable version for Angular2 avilable right now.

The API of Angular2 is still under development. There are a lot of things, which are still not clarified (like change detection, best API, forms API, etc.).