Stay on 1.3 or Move to New Angular 2.0?
AngularJS 1.3 is the best version of Angular as of yet, it introduced a lot of awesome features with substantial performance and speed improvements. But Angular was not the same as it is today. The framework changed in the meantime to keep up with the ever changing web, and developers started picking it up too and more complex applications started being created. It has undergone significant changes from version 1.3 to 2.0 to improve almost every single part of AngularJS. Angular 2.0 was officially announced at the ng-conference. This version is being rewritten from scratch to take advantage of new browser features and integrate lessons learned from Angular up to this point.
Angular 1.3
</button></div>
<div ng-controller=”SantaTodoController”>
<input type=”text” ng-model=”newTodoTitle”>
<button ng-click=”addTodo()”>+</button>
<tab-container>
<tab-pane title=”Tobias”>
<div ng-repeat=”todo in todosOf(‘tobias’)”>
<input type=”checkbox”>
ng-model=”todo.done”>
{{todo.title}}
<button ng-click=”deleteTodo(todo)”>
X
Angular 2.0
<div>
<input type=”text” [value]=”newTodoTitle”>
<button (click)=”addTodo()”>+</button>
<tab-container>
<tab-pane title=”Good kids”>
<div [ng-repeat|todo]=”todosOf(‘good’)”>
<input type=”checkbox”
[checked]=”todo.done”>
{{todo.title}}
<button (click)=”deleteTodo(todo)”>
X
</button>
</div>
<tab-pane> </tab-container> </div>
Let’s take a closer look at the above example. You no longer see ng-model and ng-click in Angular 2.0, rather it uses square bracket notation. Just like in JavaScript, Angular 2.0 will also use parentheses to invoke methods.
New things in Angular 2.0
a) AtScript
AtScript is a language that is a superset of ES6 and it’s being used to author Angular 2.0. It uses TypeScript’s type syntax to represent optional types which can be used to generate runtime type assertions, rather than compile-time checks. It also extends the language with metadata annotations.
b) Child Injectors
Angular 2.0 has other new things to offer like CHILD INJECTORS. As name suggests child injector will inherit services from parents and moreover it will also have the ability to change them. Woaahh!! Pretty Powerful child!
c) Dynamic Loading
One main issue with angular 1.3 was developers weren’t able to easily add new feature (controller or directive) on the fly. But in Angular 2.0 everything is designed from scratch with asynch.
d) Directives
In Angular 2.0 there are three types of directives:
Component Directive – Creates a custom component composed of a View and a Controller. You can use it as a custom HTML element. Also, the router can map routes to Components.
Decorator Directive – Decorates an existing HTML element with additional behavior. A classic example is ng-show.
Template Directive – Transforms HTML into a reusable template. The directive author can control when and how the template is instantiated and inserted into the DOM.
Examples include ng-if and ng-repeat.
As an Angular developer, Igor Minar made clear in ng-europe conference that ” It’s still early days and design is still evolving and changes can be seen in actual framework and we’re trying to consider all the options. Perhaps will come up with something new and amazing! “. Many developers are excited about the modern approach the Angular team is taking with 2.0, a few seem to be predicting high, and a few more are worried about what they should do.
Moreover, Angular team already announced that they will keep supporting and updating 1.3 for next few years and there will be migration path from Angular 1.3 to 2.0. Some of the people that are using AngularJS right now might say this upgrade that the framework is getting is a good thing, while some might say it’s a bad one. But how can you really judge a product that’s still in development phase? Things can completely change at any point of time, so it’s too early to make an opinion about it. We have to wait and see how things turn out to be in the end and then decide if the transition from AngularJS 1.3 to 2.0 is worth it.