What is Angular JS?
Angular JS is Java Script framework introduced by Google in 2012 (version 1.0). It is an open source. Angular JS allows a 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.
The first version of Angular.js is called AngularJS. The architecture of AngularJS is based on the MVC pattern.
Let’s start with Directives. What are the directives?
Directives give 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 an application that requires 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>
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.
Please visit Angular JS tutorial for .Net developer
Keep Learning.
