Single page application
Single page application is a web based application that contains a single web pageand that is dynamically updated as the user interacts with the application. The purposeof single page application is to provide user a desktop application like experience.
What is Angular.js?
Angular.js is a JavaScript framework for creating rich and interactive single pageapplication. Angular.js is maintained by Google.
How to include angular.js in our project
There are 2 ways to include angular.js on your webpage.
1. Download from angularjs.org
a. Go to angularjs.org and click on ‘Download’ button .
2. Include angular.js
from the cloud → You can add following script tag in
head section of your Sourcen file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Directives
Directives allow you to add behavior to HTML element.
1. ng-app – This directive is used to initialize the angular.js application. Thisdirective also defines the scope of angular.js application. For example if we have a divtag and inside the tag a directive ng-app is defined then all the angular.js elementswill work under div tag only. So if you want extend the scope to the entire page then Isuggest you to add ng-app in body or html tag.
2. ng-model - binds the value of HTML controls (input, select, textarea) toapplication data.
3. ng-bind - binds application data to the HTML view. View is user interface that auser can see and interact.
Create your first angular.js application
In the preceding section you saw that how to include angular.js in your page. In thissection we will create a simple angular.js application
In the HTML page add following code
<div ng-app="">
<p>
Name:
<input type="text" ng-model="name"></p>
<p ng-bind="name">
</p>
</div>
In the preceding code we have defined ng-app directive in a div tag. Then we have used ng-model and ng-bind to bind a paragraph and a textbox.
Complete code in Source File -
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="">
<p>
Name:
<input type="text" ng-model="name"></p>
<p ng-bind="name">
</p>
</div>
</form>
</body>
</html>
Output
Angular.js checks if the value in
paragraph is same as value in textbox. If the value isnot
same then angular.js updates the text in paragraph with the text written in
textbox.