Post
Ask Question

First AngularJS Application

So, to start with the  first question: What is AngularJS and what are its benefits?  Here is a look at it:
 
Angular JS

Angular JS is a Javascript framework that helps build web applications

Benefits of Angular JS
  1. Dependency Injection
  2. Two Way Data Binding
    It is one of the important features of AngularJs. It keeps the model and the view in sync.That means a change in the model updates the view, and a change in the view updates the model.
  3. Testing
  4. Model View Controller
    In Angular it is very easy to develop your applications using MVC. All you have to do is to split your application code into MVC components i.e. Model,View and Controller. The rest that is managing those components and connecting them together which is done by Angular automatically
  5. Directives-They control the Behaviour of DOM Elements
  6. Filters-Filters provide flexibility to the application
 
Let us create our first AngularJS Application. For this all you have to do is download a script file which is available on the following website, angularjs.org, as shown in the image. You can download the angularjs script file from a given website by clicking on the download button and adding a reference of this script file to your project,

 
First open Visual Studio then click on file-new project-select asp.net webapplication from project template and click ok.

Now right click on project on solutions explorer and add a new html page as shown below:-
 


Now add a reference of angularjs script which we have downloaded and included in our project into the head section as shown,



And the next step is to add a ng-app directive somewhere in the html,I have included in the body element.

Here ng stands for angular and ng-app directive is the starting point of angular js application. Angular framework will first search for this ng-app directive in the html page if ng-app directive is found then angular bootstraps itself and starts managing the section of the page that has a ng-app directive.

At the moment we have included the ng-app directive in the body section so everything in the body section will be manage by Angular.

Now I included a div element as shown in the image:-



Now here I want to compute the sum of 10 + 20. I have included it in double curly braces.
The double curly braces will treat that as an expression and compute the sum.This double curly braces are called  binding expression in angular. Browse the html page,you will see the following output as given below it will show sum of 10 + 20



Now the ng-app directive which is applied to the body element. I am going to move it to the div element and include one more div element to which I have not applied ng-app directive and in that I am calculating sum of 40 and 30 as shown in the image



Now run the application and you will see the output as shown below. The expression is not evaluated and shown as it is.This is beacuse angular manages that section of the page that has a ng-app direcitve.


Now move the ng-app directive to html element as shown and angular will evaluate everything inside the html section.You can also write a boolean expression or a simple javascript object or an array inside the binding expression as shown below
  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3.   
  4. <head>  
  5.     <script src="Scripts/angular.min.js" lang="ja" type="text/javascript"></script>  
  6.     <title></title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div> {{{Name : 'Abhiraj',Age:'27'}.Age}}  
  11.         <!--This is a Simple Javascript object containing two properties Name and Age and I have accessed Age Property-->  
  12.     </div>  
  13.     <div> {{['Abhiraj','Kedar','Pritesh'][2]}}  
  14.         <!--This is an Array containing 3 elements and I have accessed the element at index position 2-->  
  15.     </div>  
  16.     <div> {{1 == 2}}  
  17.         <!--This is a boolean expression which checks wether 1 is equal to 2 and it will evaluate to false-->  
  18.     </div>  
  19. </body>  
  20.   
  21. </html>  
Now browse the page and you will recieve following output,
  • 27
  • Pritesh
  • false
Thus in this blog I have tried to cover almost all the points related to ng-app directive. I will come with other directives available in angular in further blogs.Please do let me know if anything is missing in the blog.