Articles → ANGULAR.JS → Introduction To Angular.JS

Introduction To Angular.JS






Single Page Application





What Is Angular.Js?





Software Requirement




  1. A text editor (for example notepad)
  2. A web browser
  3. An angular.js file



There Are 2 Ways To Include Angular.Js On Your Webpage.


  1. Download from angularjs.org
  2. Include angular.js CDN

Download from angularjs.org


  1. Go to angularjs.org and click on ‘Download’ button as shown in following figure
  2. Picture showing the angular web portal for downloading angular.js

    Click to Enlarge

  3. A pop up appears as shown in following figure
  4. Picture showing the window to specify the type and the version of angular.js

    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




  1. 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.
  2. ng-model - binds the value of HTML controls (input, select, textarea) to application data.
  3. 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


Picture showing the output of your first angular.js program

Click to Enlarge


How It Works


Picture showing the output of your first angular.js program

Click to Enlarge




Posted By  -  Karan Gupta
 
Posted On  -  Wednesday, May 13, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250