Behaviors
You can attach multiple methods to the scope object inside a controller, which can be used as an event handler or for other purposes.
The following example demonstrates handling click event of a button.
<html>
<head>
<title>AngualrJS Controller</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<h2>Handle Button Click </h2>
<div ng-controller="myController">
Enter Message: <input type="text" ng-model="message" /> <br />
<button ng-click="showMsg(message)">Show Message</button>
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "Hello Vision Computers!";
$scope.showMsg = function (msg) {
alert(msg);
};
});
</script>
</body>
</html>
Note:- that the properties and methods attached to the scope object inside a particular controller is only available to the HTML elements and its child elements where ng-controller directive is applied.
Example: Controller
<html>
<head>
<title>AngualrJS Controller</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<h2>ng-controller directive</h2>
<div id="div1" ng-controller="myController">
Message: {{message}} <br />
<div id="div2">
Message: {{message}}
</div>
</div>
<div id="div3">
Message: {{message}}
</div>
<div id="div4" ng-controller="anotherController">
Message: {{message}}
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "This is myController";
});
ngApp.controller('anotherController', function ($scope) {
$scope.message = "This is anotherController";
});
</script>
</body>
</html>
Nested Controllers:
Angular allows nested controllers. The following example demonstrates multiple controllers.
<!DOCTYPE html>
<html>
<head>
<title>AngualrJS Controller</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<h2>Nested Controllers</h2>
<div ng-controller="parentController">
Message: {{message1}}
<div ng-controller="childController">
Parent Message: {{message1}} </br>
Child Message: {{message2}}
</div>
Child Message: {{message2}}
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('parentController', function ($scope) {
$scope.message1 = "This is parentController";
});
ngApp.controller('childController', function ($scope) {
$scope.message2 = "This is childController";
});
</script>
</body>
</html>
AngularJS Controller in external files
In larger applications, generally the controllers are stored in external files.
Create an external file named "persons.js" to store controller.
Here, "person.js" is:
<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>
<h2>External File Link Model</h2>
<div ng-app="myApp" ng-controller="personCtrl">
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 src="persons.js"></script>
</body>
</html>
Persons.js
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "Vision",
$scope.lastName = "Computers",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743