Post
Ask Question

Introduction to AngularJS

In this blog we will see,

  • What is AngularJS
  • Steps to start with Angular
  • A simple AngularJS example

What is AngularJS?

AngularJS is a JavaScript framework developed by Google.

AngularJS is an open source project, which means it can be freely used, changed, and shared by anyone.
Steps to start with Angular JS.

Step 1

To build AngularJS applications you only need one script file, angular.js.

You can find the script file on the following link. Below is the screenshot for the page you will visit.

Click on ‘Download AngularJS 1’

AngularJS

Download AngularJS

FromBuild options select ‘Uncompressed’ Version. The advantage of the uncompressed version, i.e. (angular.js) over Minified version (angular.min.js), is in the developer tool you will get an error message which is readable if you usethe  uncompressed version.

E.g.

error

Step 2

Include ng-app attribute. Ng stands for Angular. It is a directive which is a starting point of AngularJS Application. You can place it at any level i the html page but generally it is placed at the root or body tag level so that entire page will be managed by angular.

Simple AngularJS example

  • Create a new Website in Visual Studio.

    Create a new Website

  • Right click on the website and add an existing item. Chose angular.js from the folder you have saved.

    add item

    angular.js from

  • Now add one html page and just drag and drop angular.min.js in your HTML page. It will look like this.
    1. <head>  
    2.    <scriptsrc="Scripts/angular.js"></script>  
    3. </head>  
  • Following is the code for a simple app. Here the expression in double curly braces will be evaluated and displayed.

    Note - Double curly braces are used to bind expressions in angular.
    1. <!DOCTYPE html>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4. <head>  
    5.     <script src="Scripts/angular.js">  
    6.     </script>  
    7. </head>  
    8.   
    9. <body ng-app>  
    10.     <div>  
    11.         <p>The Result of 10 + 20= {{10+20}}</p>  
    12.         <br/>  
    13.   
    14.         <p>is 1 equal to 2 ?{{1==2}}</p>  
    15.         <br/>  
    16.   
    17.         <p>The name Property Value retrived is: {{{name:'rekha',age:'30'}.name}}  
    18.         </p>  
    19.   
    20.     </div>  
    21. </body>  
    22.   
    23. </html>  
  • Result of Program is:

So by using the above code you will be able to create a simple AngularJS application.