A Controller takes
the data from the View, processes the data, and then sends that data across to
the view which is displayed to the end user. It maintains the application data and behavior using $scope object.
Example 1:
Example 2:
Imp Points:
Example 3:
Controllers In External Files
Example 4:
Controller Methods
<script src="demoController.js"></script>
It is used to control the data of AngularJS applications. A controller is defined using ng-controller
directive. A controller is a JavaScript object containing attributes/properties
and functions
Example 1:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
<h1>{{name}}</h1>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.name
= "suryosnata";
});
</script>
</body>
</html>
Example 2:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<p>Enter two number:</p>
<p>a value: <input type="number"
ng-model="a"></p>
<p>b value: <input type="number" ng-model="b"></p>
<p>{{(a+b)}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a= 10;
$scope.b= 15;
});
</script>
</body>
</html>
Imp Points:
The
AngularJS application is defined by ng-app="myApp".
The application runs inside the <div>.
The ng-controller="myCtrl" attribute
is an AngularJS directive. It defines a controller.
The myCtrl function
is a JavaScript function.
AngularJS
will invoke the controller with a $scope object.
In
AngularJS, $scope is the application object (the owner of application variables
and functions).
The
controller creates two properties (variables) in the scope (a and b).
The ng-model directives
bind the input fields to the controller properties (a and b).
Example 3:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
<ul>
<li
ng-repeat="y in fruits">{{y}}</li>
</ul>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.fruits
= ["apple", "orange", "mango"];
});
</script>
Controllers In External Files
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in stud">
{{ x.age+ ', ' + x.name }}
</li>
</ul>
</div>
<script src="demoController.js"></script>
</body>
</html>
demoController.js
angular.module('myApp',
[]).controller('myCtrl', function($scope) {
$scope.stud = [
{age:'26',name:'suryosnata'},
{age:'10',name:'khusi'},
{age:'25',name:'hemant'}
];
});
$scope.stud = [
{age:'26',name:'suryosnata'},
{age:'10',name:'khusi'},
{age:'25',name:'hemant'}
];
});
Controller Methods
A
controller can also have methods (variables as functions):
Example 5:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="demoCtrl">
First Name: <input
type="text" ng-model="firstName"><br>
Last Name: <input
type="text" ng-model="lastName"><br>
<br>
Full Name:
{{fullName()}}
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('demoCtrl',
function($scope) {
$scope.firstName = "suryosnata";
$scope.lastName = "behera";
$scope.fullName = function() {
return $scope.firstName + " "
+ $scope.lastName;
};
});
</script>
</body>
</html>
Example 6:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="demoCtrl">
First Name: <input
type="text" ng-model="firstName"><br>
Last Name: <input
type="text" ng-model="lastName"><br>
<br>
Full Name:
{{fullName()}}
</div>
<script src="demoController.js"></script>
</body>
</html>
demoController.js
angular.module('myApp',
[]);
app.controller('demoCtrl',
function($scope) {
$scope.firstName = "suryosnata";
$scope.lastName = "behera";
$scope.fullName = function() {
return $scope.firstName + " "
+ $scope.lastName;
};
});
Output:
First Name:
Last Name:
Full Name: suryosnata behera
Last Name:
Full Name: suryosnata behera
Python is an open-source, high level, interpreted programming language which offers great opportunities for object-oriented programming. Choosing a python training program from Red Prism Group, which is best training institute for python in noida.
ReplyDelete