AngularJS is one of the popular JavaScript framework nowadays. It is an open source web development framework maintained by Google. AngularJS simplifies the development and testing of a web application. AngularJS helps you to create web applications using MVC (Model, View, Controller) pattern. AngularJS particularly deals with the problems or difficulties a developer face while creating SPA (Single Page Application). I am going to write a series of blog on AngularJS, and try to cover most part of it. I will make the things simple and use only AngularJS and bootstrap to explain the framework.
In the examples I am going to use Visual Studio 2013 IDE. But you can use any editor to write down the code even in a notepad. You can use Visual Studio community edition which is free. You can also use Eclipse PHP editor.
So lets start our first example. Create a new HTML page and name it helloworld.html. The next things is to download the AngularJS. You can download the framework from AngularJs web site. Or just reference it from a CDN server. The CDN link is as follow, https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js . Add the below lines of code in helloworld.html.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<title>Hello World - AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<h3>Hello {{HelloWorld}}</h3>
Enter value: <input type="text" ng-model="HelloWorld" />
</div>
</body>
</html>
Let’s examine the above code. At the root of document you can see I place the ng-app attribute of ngApp directive. This directive tells the AngularJS that the entire page or a part of page should be treated as Angular application. ngApp directive is used to auto bootstrap the application. ngApp directive is typically places at the root element of the page which could be <body> or <html> tags. In the above example if you remove the ng-app attribute you will see the html document will not be compiled and in the browser you will the h3 heading output like this Hello {{HelloWorld}}.
Next take a look at the h3 tag. It contains the HelloWorld with double curly braces {{ }}. Double curlies are used for binding in the AngularJS. AngularJS evaluate the expression within the double curly braces and insert the result into the DOM in place of binding. This is not a one time update, whenever the expression result change the binding will change, its a continuous update process. To understand this browser the page and type “World!!!” in the textbox and you can see the immediate change in the heading. Clear the input and type “AngularJs” and you will see the output changes to “Hello AngularJS”. Inside the input tag you can see I place the ng-model attribute. ng-model directive binds the value of HTML controls to application data. In the above example you can see that ng-model is synchronized with the expression {{HelloWorld}} . I will discuss ng-model more in detail. Lets take a look at the example below,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<title>Welcome - AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js" type="text/javascript"></script>
</head>
<body>
<div>
Quantity: <input type="number" ng-model="quantity" />
Cost: <input type="number" ng-model="cost" />
<h4>Total: {{quantity * cost}}</h4>
</div>
</body>
</html>
The above example is another simple piece of code where you can get the Total by multiplying the quantity and cost. And as you can see how easy it is to use the AngularJs. Once you change any value in the above example you will see that Total is automatically change. This is the benefit of continuous evaluation of expression. If you try to achieve this functionality in classic JavaScript, I believe you have to write down multiple lines of code. Whereas Angular is taking care of this binding process and makes our work not only easy but reduce the number of lines of JavaScript code.