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 https://angularjs.org 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>
        </div>

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>
        Sum={{10+20}}
    </div>

Output - 30

Example 2:

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

    </div>

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>

</div>

Output - 32

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

Keep Learning.





Comments

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