Table of Content
History
Introduction
AngularJS is a JavaScript Framework
What is Angular JS Directives
AngularJS Expressions
AngularJS Numbers
AngularJS Strings
AngularJS Objects
AngularJS Arrays
AngularJS Applications
Practical Questions
Embedded Files
VIMALA GURUKUL
History
AngularJS version 1.0 was released in 2012.
Misko Hevery, a Google employee, started to work with AngularJS in 2009.
The idea turned out very well, and the project is now officially supported by Google.
Introduction
AngularJS is perfect for Single Page Applications (SPAs).
It is a JavaScript framework. It can be added to an HTML page with a <script> tag.
It extends HTML attributes with directives just like Class or Id), and binds data to HTML with Expressions(just like <p>,<h1>).
AngularJS is a JavaScript Framework
AngularJS is a JavaScript framework written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
What is AngularJS Directives
Directives are used to extend HTML. It is a started with ng-prefix.
It contains following directives:
ng-app – It is used to initialize an Angular JS application. The ng-app directive is a starting point.
Example,
<div ng-app=””>
//code
</div>
ng-init- It is used to initialize variables in AngularJS application.
Example,
<div ng-app=”” ng-init=”name=[‘abc’]”>
//code
</div>
ng-model- It associates the value of HTML controls with the application data.
Example,
<div ng-app=””>
//code
<p>Enter Text: <input type=”text” ng-model=”name”></p>
</div>
ng-bind- It directive binds application data to the HTML view.
Example,
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello <span ng-bind="name"></h1> </span>
</div>
ng-repeat- It is used to repeat HTML elements for every item in a collection.
Example,
<div ng-app=”” ng-init=”names=[‘abc’,’xyz’]”>
<ul>
<li ng repeat=”n in names”>
{{n}}
</li>
</ul>
</div>
Step to create AngularJS
Step 1 – Load framework it is done by using <script> tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
Step 2 – Define application using ng-app directive
<div ng-app=””>
//code
</div>
Step 3 – Define a model name using ng-model directives.
<p>Enter Text:<input type=”text” ng-model=”name”></p>
Step 4 – Bind the value of above model defined using ng-bind directive.
<p>Hello<span ng-bind-“name”></span></p>
Example1.
<!DOCTYPE html>
<html>
<head>
<title>Example1</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello <span ng-bind="name"></h1> </span>
</div>
</body>
</html>
Example2.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Coffee','Tea','Milk']">
<p>Looping with ng-repeat:</p>
<ol type=i>
<li ng-repeat="a in names">
{{ a }}
</li>
<ol>
</div>
</body>
</html>
AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS will "output" data exactly where the expression is written:
Example
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<h1>AngularJS Expressions</h1>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.
Example
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Change the color of the input box, by changing its value:
Example
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="color:{{myCol}}" ng-model="myCol">
</div>
</body>
</html>
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:
<!DOCTYPE html>
<html>
<head>
<title>Numbers </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>
AngularJS Strings
AngularJS strings are like JavaScript strings:
<!DOCTYPE html>
<html>
<head>
<title>Strings</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The full name is: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
AngularJS Objects
AngularJS objects are like JavaScript objects:
<!DOCTYPE html>
<html>
<head>
<title>Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
</body>
</html>
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:
<!DOCTYPE html>
<html>
<head>
<title>Arrays</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
</body>
</html>
AngularJS Applications
AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines
the controller.
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<title>Example </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<p>Try to change the names.</p>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Ram";
$scope.lastName= "Sharma";
});
</script>
</body>
</html>
AngularJS modules define applications:
AngularJS Module
var app = angular.module('myApp', []);
AngularJS controllers control applications:
AngularJS Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "Ram";
$scope.lastName= "Sharma";
});
Practical Questions
Q.1. AngularJS Program to find the Simple Interest
Solution:-
<!DOCTYPE html>
<html>
<head>
<title>Simple Interest Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="">
<table cellpadding="3px" align="center" style="border:2px solid red;padding:10px;border-radius:20px;">
<tr>
<th colspan="2">Simple Interest Calculator</th>
</tr>
<tr>
<td>Principle Amount</td>
<td><input type="text" ng-model="P"></td>
</tr>
<tr>
<td>Rate of Interest</td>
<td><input type="text" ng-model="R"></td>
</tr>
<tr>
<td>Time</td>
<td><input type="text" ng-model="T"></td>
</tr>
<tr>
<td>Simple Interest</td>
<td><h4>{{((P*R*T)/100)}}</h4></td>
</tr>
</table>
</div>
</body>
</html>
Q.2. Angular JS program to convert Temperature Fahrenheit to Degree Celsius
Solution:-
<!doctype html>
<html>
<head>
<title>Convert Temperature</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1>Temperature Fahrenheit to Degree <br/>Celsius Converter using Angular JS</h1>
<div ng-app="" ng-init="f=32">
Temperature in Fahrenheit: <input type="text" ng-model="f"><br/><br/>
Temperature in Degree Celsius: {{(f-32)*(5/9)}}
</div>
</body>
</html>
Q.3. AngularJS Program to change the background color of box
Solution:-
<!doctype html>
<html>
<head>
<title>Background change</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1>Background Change</h1>
<div ng-app="" ng-init="change='lightblue'">
<input style="background-color:{{change}}" ng-model="change">
</div>
</body>
</html>
Q.4. AngularJS Program for Dollar to Indian Rupee Conversion
Solution:-
<!doctype html>
<html>
<head>
<title>Dollar to Indian Rupee Converter using Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1 style="font-size:18px">Dollar to Indian Rupee Converter using Angular JS</h1>
<div ng-app="">
<table>
<tr>
<td>United States Dollar: </td>
<td><input type="text" ng-model="dollar" value="1"></td>
</tr>
<tr>
<td>Indian Rupee:</td>
<td><input type="text" value="{{dollar*83.09}}"/></td>
</tr>
</table>
</div>
</body>
</html>
Q.5. Angular JS program to change the size of circle using range bar
Solution:-
<!DOCTYPE html>
<html>
<head>
<title>Range</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.circle
{
width:300px;
height:300px;
background:green;
border-radius:50%;
}
</style>
</head>
<body>
<div ng-app="">
100<input type="range" min="100" max="500" step="20" ng-model="size"/>{{size}}<br/>
<br/>
<br/>
<div class="circle" style="width:{{size}}px;height:{{size}}px"></<div>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse