Data Haunting

Easy Solutions Destination


AngularJs simple example for beginners

AngularJs is Open source Javascript Library developed by google and community which is so powerful and adaptive Javascript framework by Developer. In this article we will see how Angular Js can be userful to begginers developer by simple example.

We have already discuss advantages of AngulrJs in our previous article which compare AngularJs, Knockout js, Backbone js and Ember JS. Now let’s see we have following type of example as shown in image.


Suppose we have one textbox and lable and what ever we are typing here it must be shown in label instant. We are bothered that how can we do it with Javascript and Jquery but it bit harder than AngularJs. With AngularJs we can achieve above thing very easily. We will see very easy way to implement AngularJS in our simple application.

Add AngularJs script in your application

First thing we have to do that we need to add AngaularJs library in our application. We can add live reference as well you can download and add in your project/application.

AngularJs simple example with extending Html for beginners

See in above example we have seen that whatever we are typing in our textbox instantly it is binding in label. This bi-directional task is possible with Angular js using ng-directives very simple way as following way by extending Html.

This is enough code for our bi-directional example that what are thing we type it is binding instantly.Let me give you some brief idea about ng-directives which we are here using.
ng-app – directive is used to tell that AngularJs is applicable on given spicific tag which “div” here.
ng-model – directive binds the value of Html tag text box into our applications.
ng-bind – directive binds the value of Html tag text box inside the innerHtml of our “Paragraph” tag in our application.

AngularJs simple example using Expressions for beginners

Above we have seen example using extending the Html, same thing we can apply here using {{expressions}}. Let’s see the coding for same example as below.

Here we have just change ng-bind directive to {{expressions}} and other all things are same. compare to first example. Expression can also be useful to evaluate Mathematical expressions like below code.

which turns into Result : 15. We will see Expression in details in our up coming articles.

What is your opinion ?

Here we have seen very simple example of AngularJs which can be useful to beginners. Here I have explained simplest way of using AngularJs into our application those who are very new.If you have any query and question, you can comment or you can mail me.

One Response to AngularJs simple example for beginners

Leave a Reply