The latest version of Angular JS is here and all the programming heads cannot hold on to their excitement. First look at the Angular JS 2.0 and you can easily make out that it is so different from the earlier version that you could give it a new name altogether. Therefore, it will definitely give a chance to the angular team to implement everything that they have learned being the most popular frontend framework over the last 6 years. Having said that, Angular 2.0 is going to be a new learning just like Angular 1.0 was. Although it’s worth that effort as once you get your heads around it, we think it would be a much easier framework to use. So, let’s quickly take a look at how it is different and better than the previous version.

1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. Now, the big question is that what is it really that you should jump on to this new version?

Template Basics

Templates are written in HTML and is a vital user-facing part of any Angularjs app. Major changes in the basic templates can be noted in Angularjs 2. These changes include local variables, Filters and Bindings.

Template Directives

Angularjs 1 offers more than 70 built-in directives for templates. In AngularJS 2, many of them are not necessary. So, they have created some equivalents in the latest version. Although you can bootstrap an Angular 1 app in code, many applications bootstrap declaratively with the ng-app directive, giving it the name of the application’s module

Modules/Controllers/Components

In both Angular 1 and Angular 2, Angular modules help to systematise your application into closely knit blocks of functionality. The previous version required  you write the code that provides the model and the methods for the view in a controller. In Angular 2, you build a component. JavaScript code is shown in the Angular 1 column because a lot of Angular 1 code is in JavaScript. The Angular 2 code is shown using TypeScript.

Filters/Pipes

Just like Angular 1 filters, angular 2 give transformation and formatting for data in the template. A lot of built-in filters of Angular 1 have matching pipes in Angular 2.
A few examples-
json
COPY CODE
<pre>{{movie | json}}</pre>
Converts a JavaScript object into a JSON string. This is useful for debugging.

limitTo
COPY CODE
<tr ng-repeat=”movie in movieList | limitTo:2:0″>
Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0).

orderBy
COPY CODE
<tr ng-repeat=”movie in movieList | orderBy : ‘title'”>
Displays the collection in the order specified by the expression. In this example, the movie title orders the movieList.

Style Sheets

Style sheets glams up your app and provide an admirable look to your app. With evolution over the years, the styles for many parts merge, which can cause unanticipated results. In Angular 2, now you can also encapsulate a style sheet within a specific component along with the option of defining style sheets for your entire app.

Better performance
Easier to use
Future proof with ES6
Uses web standards

Angular JS is pretty much popular among the developers and the latest version surely has a bunch of new and improved features to play with. Well, in our word it’s definitely worth to upgrade from Angular JS 1.0 to Angular JS 2.0

admin