AngularJS Controller
Coltroller control the application . AngularJS controller is a regular JavaScript Object ,created by a standard JavaScript object constructor.This JavaScript Object holds the holds attributes and functions of the application . AngularJS controller control the data of the application.It is defined by the keyword
ng-controller . AngularJS accept $scope as parameter.
Below is the example of controller . A module defined as "myApp" ,
under "myApp" , a controller "myController" is defined.
var myApp = angular.module('myController', []);
Coltroller control the application . AngularJS controller is a regular JavaScript Object ,created by a standard JavaScript object constructor.This JavaScript Object holds the holds attributes and functions of the application . AngularJS controller control the data of the application.It is defined by the keyword
ng-controller . AngularJS accept $scope as parameter.
Below is the example of controller . A module defined as "myApp" ,
under "myApp" , a controller "myController" is defined.
var myApp = angular.module('myController', []);
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope)
{
$scope.Pass
= function
()
{
return
$scope.msg = "Congratulation
!!! You have pass the examination";
};
$scope.Fail
= function
()
{
return
$scope.msg = "Not
Worry !! Try next time.";
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController">
<button
ng-click="Pass()">Pass</button>
<button
ng-click="Fail()">Fail</button><br
/>
Your
Result {{msg}}
</div>
Output :
Controller is responsible for control data to pass to view . The scope and view , communication is two way.Any change made in scope , will be reflect to the view and and change made in view will effect to scope.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope)
{
$scope.Pass
= function
()
{
$scope.msg
= $scope.mymodel;
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController">
<input
type="text"
ng-model="mymodel"
/>
<button
type="button"
ng-click="Pass()"
value="Click
here"
/>
<span>Your
Result {{msg}}</span>
</div>
Output :
Controllers In External Files
A controller code can be placed to javascript file .
Example
HTML
page
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="jsscipt.js"></script>
</head>
<div
ng-app="myApp"
ng-controller="myController">
<input
type="text"
ng-model="mymodel"
/>
<button
type="button"
ng-click="Pass()"
value="Click
here"
/>
<span>Your
Result {{msg}}</span>
</div>
example.js
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope)
{
$scope.Pass
= function
()
{
$scope.msg
= $scope.mymodel;
};
});
Output :
Controllers can be nested
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController1',
function
($scope)
{
$scope.Pass1
= function
()
{
$scope.msg1
= $scope.mymodel1;
};
});
app.controller('myController2',
function
($scope)
{
$scope.Pass2
= function
()
{
$scope.msg2
= $scope.mymodel2;
};
});
app.controller('myController3',
function
($scope)
{
$scope.Pass3
= function
()
{
$scope.msg3
= $scope.mymodel3;
};
});
app.controller('myController4',
function
($scope)
{
$scope.Pass4
= function
()
{
$scope.msg4
= $scope.mymodel4;
};
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myController1">
<fieldset>
<legend>1st
Level Controller</legend>
<input
type="text"
ng-model="mymodel1"
ng-keyup="Pass1()"
/>
<span>Your
Result {{msg1}}</span>
<div
ng-controller="myController2">
<fieldset>
<div
ng-controller="myController2">
<legend>2nd
Level Controller</legend>
<input
type="text"
ng-model="mymodel2"
ng-keyup="Pass2()"
/>
<span>Your
Result {{msg2}}</span>
</div>
</fieldset>
<div
ng-controller="myController3">
<fieldset>
<div
ng-controller="myController3">
<legend>3rd
Level Controller</legend>
<input
type="text"
ng-model="mymodel3"
ng-keyup="Pass3()"
/>
<span>Your
Result {{msg3}}</span>
</div>
</fieldset>
<div
ng-controller="myController4">
<fieldset>
<div
ng-controller="myController4">
<legend>4th
Level Controller</legend>
<input
type="text"
ng-model="mymodel4"
ng-keyup="Pass4()"
/>
<span>Your
Result {{msg4}}</span>
</div>
</fieldset>
</div>
</div>
</div>
</fieldset>
</div>
</div>
Controller Methods With object
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<style>
.input
{
border-radius:
5px;
text-align:
center;
padding-left:
10px;
border:
1px
solid
gray;
margin:
5px;
background-color:
lightgray;
width:
200px;
}
</style>
<script>
var
app = angular.module("myApp",
[])
app.controller("myController",
function
($scope)
{
$scope.students
=
{
Name:
"Student1",
Age:
12,
Address:
"kolkata"
};
$scope.CreateMessage
= function
()
{
$scope.Message
= "Hello,
"
+ $scope.students.Name + "
you are "
+ $scope.students.Age + "
year old. , your Address is "
+ $scope.students.Address;
}
});
</script>
<body
ng-app="myApp"
style="padding:
15% 10% 15% 40%">
<div
style="text-align:
center; border:
solid 2px gray; width:
50%">
<h2
style="text-decoration:
underline; color:
dodgerblue">
Bio
Data</h2>
<div
ng-controller="myController"
ng-init="CreateMessage()">
<table>
<tr>
<td
style="width:
50%;">
Name
:
</td>
<td
style="width:
50%;"
>
<input
type="text"
ng-model="students.Name"
ng-keyup="CreateMessage()"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="students.Age"
ng-keyup="CreateMessage()"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="students.Address"
ng-keyup="CreateMessage()"
/>
</td>
</tr>
<tr>
<td
colspan="2"
style="
color:Maroon;">
{{Message}}
</td>
</tr>
</table>
</div>
<div>
</body>
Output :
Controller & Service
During some service implementation of AngularJs ,you need to pass service throught the controller.For example
$http
app.controller('myControl', function ($scope, $http)
$interval
app.controller('myControl', function ($scope, $interval) $window
app.controller("myCtroller", function ($scope, $window)
$filter
app.controller('myController', function ($scope, $filter)
$rootScope
app.module('myApp', []).controller('myController1', function ($scope, $rootScope)
{
}
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtroller",
function
($scope, $window)
{
$scope.ShwoMessage
= function
()
{
$scope.message
= '';
$scope.message
= $scope.DelIndex;
$window.alert($scope.message);
}
$scope.ShwoPrompt
= function
()
{
$scope.msg
= '';
$scope.msg
= $scope.DelIndex;
var
name = $window.prompt($scope.msg);
}
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller">
<input
type="text"
ng-model="DelIndex">
<button
type="button"
ng-click="ShwoMessage()">
Show
Message</button>
<button
type="button"
ng-click="ShwoPrompt()">
Show
Prompt</button>
</div>
Output :
No comments:
Post a Comment