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!
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!
Thanks for sharing this valuable information to our vision. You have posted
ReplyDeletea trust worthy blog keep sharing.
Angularjs Training In Hyderabad
I got what i am seraching from last few days in your Blog. I hope you will share more info about it. Please keep sharing.
ReplyDeleteLaptop Service center in Ameerpet
Dell Service center in Ameerpet
HP Service center in Ameerpet
Lenovo Service center in Ameerpet
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHere is the site(bcomexamresult.in) where you get all Bcom Exam Results. This site helps to clear your all query.
ReplyDeleteBA 3rd year Result 2019-20
Chhatrapati Sahu Ji Maharaj University BCOM 3rd Year Result 2020