Introduction to Angular JS.

Angular JS is Java Script framework introduced by google in 2012 (version 1.0). It is an open source. Angular JS allow developer to write a powerful client side coding. To work with Angular JS just download angular js file from and reference it into your HTML, ASPX page.

Lets start with Directives. What are directives ?

Directives gives a way to group HTML and Java Script functionality into one bundle.

Few directives that are used in Angular JS from programming context are -

  • ng-app
  • ng-model
  • ng-show
  • ng-bind
  • ng-repeat
  • ng-controller
  • ng-click
  • ng-include

So how to use directives in HTML, ASPX page.
<div ng-show="isDisplay">
Here If isDisplay value changed to false, above div section will be hidden.

Here question may rise that, why Angular JS?

Angular JS is a very powerful tool for developing application that require two way data binding.
It means if you need to change the contents of HTML you need to write code like this.

$('span').html('My first Angular JS Code');

In angular JS below code will change the value of Lable as soon as you start typing in Textbox

   <div ng-app="">
            <input type="text" ng-model="UserName" />
            <br />
            Hello !  <label id="l1" ng-bind="UserName"></label>

Below is the output for above code

Angular Expression

Angular JS expression can be written in double braces.

Example 1: Write below code in your HTML page
 <div ng-app>

Output - 30

Example 2:

 <div ng-app>
        Sum={{firstName + " " + lastName}}


Example 3:

<div ng-app="" ng-init="points=[2,11,7,32,4,3]">

<p>The third result is <span ng-bind="points[3]"></span></p>


Output - 32

These are just basic of Angular JS, I will write more blogs on Angular JS in upcoming days.

Keep Learning.


Popular posts from this blog

CAML Query in SharePoint 2010

Calling REST APi from server side code - C#

All about SharePoint 2010 Content Type Hub

SharePoint Interview Questions and Answers

Calling ASP.Net WebMethod using jQuery AJAX