Articles → ANGULAR.JS → Introduction to angular.js

Introduction to angular.js

In this article I will provide a brief introduction on angular.js. But before we start with angular.js let’s discuss some of the basic concepts.

Single page application

Single page application is a web based application that contains a single web page and that is dynamically updated as the user interacts with the application. The purpose of 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 page application. Angular.js is maintained by Google.

Software requirement

For angular.js application we need

   1. A text editor (for example notepad)

   2. A web browser

   3. An angular.js file

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 as shown in following figure

Picture showing the angular web portal for downloading angular.js

Click to Enlarge

b. A pop up appears as shown in following figure

Picture showing the window to specify the type and the version of angular.js

Click to Enlarge

As you can see in the preceding figure there are 2 versions of angular.js – Minified and uncompressed. You can download any of these because both are functionally same.

But in minified version, size is reduced by removing the unnecessary stuff. So if you are working in development environment you can use any of the 2 versions but for production environment it is recommended to use minified version of the code.

2. Include angular.js from the cloud → You can add following script tag in head section of your HTML 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. 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

In the preceding section you saw that how to include angular.js in your page. In this section 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 -

<%@ 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

Angular.js checks if the value in paragraph is same as value in textbox. If the value is not same then angular.js updates the text in paragraph with the text written in textbox.

Posted By -	Karan Gupta

Posted On -	Wednesday, May 13, 2015

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250