First Look at AngularJS 2.0

AngularJS 2.0 developer preview has been released! This blog post is to experience the new features in the framework with a simple angular2 application.

Heads Up : AngularJS 2.0 is written in TypeScript. TypeScript is a super-set of ES6 which is a super-set of ES5 which is currently the browsers fully supported version of JavaScript.  So when writing angular2 components, we can use choose among TypeScript, ES6, ES5 or Dart if you will.

For this blog post I use TypeScript.

Please refer 5 Min Quick Start Guide to setup angular2 development environment.
Once you have setup the environment and followed the guide, you will be able to see a similar result as follows.

Now let's add few more features to this.

We will create a shopping list where a user can view the list, add a new item or remove a item from the list. So to begin, let's create the listItems array.

Change the app.ts file as follows.

Let's create the list.html file which is the view for this component.

Note: Instead of ng-repeat, Angular2 has *ng-for directive. This directive should be required from the component and bind to the view as a directive. ( see app.ts ).

Now we can spin up a server and view index.html. It should look like this.

Now, let's implement add-item and remove-item features in our little app.

We can add following code to implement add-item and remove-item from the shopping list. Take a look at the changes in list.html and app.ts files.

Note: Angular2 uses standard or inbuilt DOM element properties and events to data-bind. For example it doesn't use ng-click separately instead it uses element's click event. See the syntax.

Final Output.

That's enough for our simple application. :)

In summary, we could say that AngularJS 2.0 has prioritize the web-standards in its new release. Which is really good in many ways.

Get the code : https://github.com/mjzone/angular2Demo

Cheers!