AngularJS
Angular JS – Controller:
Angular JS Mainly relies on Controller to control the flow of data in application. The controller is
defined using ng-controller directive. The controller is JavaScript object containing
attributes/properties and function. Each controller accepts $scope as a parameter which refers to
application/module that controller is to control.
<div ng-app = "" ng-controller = "studentController">
...
</div>
Here we declared a controller ‘studentController’ using ng-controller directive.
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " +
studentObject.lastName;
}
};
}
</script>
1) studentController is defined as a JavaScript Object with $scope as an argument.
2) $scope is reference to application which is to use the studentController object.
3) $scope.student is property for studentController.
4) Firstname and lastname are property for $scope.student and Now $scope.student is Object.
5) Here fullName is a function of $scope.student object and whose task is to return the
combined name.
6) fullName function we’re getting the student object and then return the combined value.
Page 1
7) We can also define controller object in separate JS file.
Now we can use studentController object in ng-model to get the values from controller by using the
expression.
Enter first name: <input type = "text" ng-model =
"student.firstName"><br>
Enter last name: <input type = "text" ng-model =
"student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
Here student.firstname and student.lastname were placed to ng-model and in page it will show
default values which is assigned in JS file.
And fullName() method can give in two ways a) expression or b) ng-bind.
Example for ng-controller (Angular JS Controller):
<html>
<head>
<title>Angular JS Controller</title>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.j
s"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
Enter first name: <input type = "text" ng-model =
"student.firstName"><br>
Enter last name: <input type = "text" ng-model =
"student.lastName"><br>
<br>
Page 2
You are entering: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " +
studentObject.lastName;
}
};
});
</script>
</body>
</html>
Angular JS – Filters:
Filters are used to modify the data and the clubbed into expressions or directives using pipe
character. Following is the commonly used filters in directives.
1) Uppercase : It Convert the Text into Uppercase
2) Lowercase: it convert the text into lowercase
3) Currency: It places currency symbol before numeric value.
4) Filter: filter the array to a subset of it based on provided criteria.
5) Order By: orders the array based on provided criteria.
Uppercase Filter:
Page 3
Add uppercase filter to an expression using pipe character. We've added uppercase filter to print
student name in all capital letters.
Lowercase Filter:
Add lowercase filter to an expression using pipe character. We've added lowercase filter to print
student name in all lowercase letters.
Currency Filter:
Add currency filter to an expression returning number using pipe character. We've added currency
filter to print fees using currency format.
Filter:
To display only required user values.
Order by:
To order values by numeric.
<html>
<head>
<title>Angular JS Filters</title>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.j
s"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model
="student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
Page 4
<td><input type = "text" ng-model =
"student.lastName"></td>
</tr>
<tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model =
"student.fees"></td>
</tr>
<tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model =
"subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName()
| uppercase}}</td>
</tr>
<tr>
<td>Name in Lower Case: </td><td>{{student.fullName()
| lowercase}}</td>
</tr>
<tr>
<td>fees: </td><td>{{student.fees | currency}}
</td>
</tr>
Page 5
<tr>
<td>Subject:</td>
<td>
<ul>
<li ng-repeat = "subject in student.subjects |
filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks
}}
</li>
</ul>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
Page 6
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " +
studentObject.lastName;
}
};
});
</script>
</body>
</html>
AngularJS Sample Application
Enter first name:
Enter last name:
Enter fees:
Enter subject:
Name in Upper Case: MAHESH PARASHAR
Name in Lower Case: mahesh parashar
fees: $500.00
Math, marks:65
Subject: Physics, marks:70
Chemistry, marks:80
Angular JS – HTML DOM:
Following Directives bind the application data to attributes of Html Dom Elements.
1) ng-disabled
2) ng-show
3) ng-hide
4) ng-click
ng-disabled: Add ng-disabled attribute to a HTML button and pass it a model. Bind the model to a
checkbox and see the variation.
ng-show: Add ng-show attribute to a HTML button and pass it a model. Bind the model to a checkbox
and see the variation.
Page 7
ng-hide: Add ng-hide attribute to a HTML button and pass it a model. Bind the model to a checkbox
and see the variation.
ng-click: Add ng-click attribute to a HTML button and update a model. Bind the model to html and
see the variation.
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<tr>
<td><input type = "checkbox" ng-model =
"enableDisableButton">Disable Button</td>
<td><button ng-disabled = "enableDisableButton">Click
Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model =
"showHide1">Show Button</td>
<td><button ng-show = "showHide1">Click
Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model =
"showHide2">Hide Button</td>
<td><button ng-hide = "showHide2">Click
Me!</button></td>
Page 8
</tr>
<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click = "clickCounter = clickCounter +
1">Click Me!</button></td>
</tr>
</table>
</div>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.j
s">
</script>
</body>
</html>
AngularJS Sample Application
Disable Button Click Me!
Show Button
Hide Button Click Me!
Total click: 12 Click Me!
Angular JS – Modules:
Angular JS supports Modular approach. Modular is used to separate logic say service, application,
controller etc. and it will keep the code clean. We define modular in separate JS file and the name
them as per the module.js. There are two JS files one is Application and Controller JS file.
1) Application Module: Application module is used to initialize the application with controller.
2) Controller Module: Controller Module is used to define the controller.
Page 9
Application Module:
[This array contain dependent Module]
Syntax: var mainApp = angular.module(‘myApp’, []);
[Application Module Name ng-app=’myapp’].
Here we've declared an application myApp module using [angular.module function]. We've passed
an empty array to it. This array generally contains dependent modules.
Controller Module:
Syntax: mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " +
studentObject.lastName;
}
};
});
Here we declared Controller StudentController module to mainApp.controller() Function.
Page 10
Use Modules :
<div ng-app = "mainApp" ng-controller = "studentController">
...
<script src = "mainApp.js"></script>
<script src = "studentController.js"></script>
</div>
Here we've used application module using ng-app directive and controller using ng-controller
directive. We've imported mainApp.js and studentController.js in the main html page.
Page 11
