Articles → ANGULAR.JS → Introduction To Angular.JS
Introduction To Angular.JS
Single Page Application
What Is Angular.Js?
Software Requirement
- A text editor (for example notepad)
- A web browser
- An angular.js file
There Are 2 Ways To Include Angular.Js On Your Webpage.
- Download from angularjs.org
- Include angular.js CDN
Download from angularjs.org
- Go to angularjs.org and click on ‘Download’ button as shown in following figure
Click to Enlarge
- A pop up appears as shown in following figure
Click to Enlarge
Include angular.js CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Directives
- ng-app – This directive is used to initialize the angular.js application. This directive also defines the scope of angular.js application. For example if we have a div tag and inside the tag a directive ng-app is defined then all the angular.js elements will work under div tag only. So if you want extend the scope to the entire page then I suggest you to add ng-app in body or html tag.
- ng-model - binds the value of HTML controls (input, select, textarea) to application data.
- ng-bind - binds application data to the HTML view. View is user interface that a user can see and interact.
Create Your First Angular.Js Application
<div ng-app="">
<p> Name:
<input type="text" ng-model="name">
</p>
<p ng-bind="name"> </p>
</div>
<%@ 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 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
Click to Enlarge
How It Works
Click to Enlarge