डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Controllers

AngularJS Application के data को control करने का काम Controller करता है |

Controller को define करने के लिए controller() function का इस्तेमाल किया जाता है |

Controller इस Javascript Object को ng-controller का इस्तेमाल करके define किया जाता है | Controller में Functions और variables हो सकते है |

Example for Controller

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">

<p>{{message}}</p>

<script>  
var myapp = angular.module("app", []);  
myapp.controller("ctrl", function($scope){  
	$scope.message = "Welcome";  
});  
</script>  

</div>

</body>
</html>
Output :
Welcome

Example में <div> Element में ng-controller="ctrl" directive को दिया गया है | उस directive पर 'ctrl' ये controller है | उसके बाद <div> element पर {{message}} expression दिया गया है |

<scrip> पर Application module को create करने के लिए module() function को दिया गया है | वहापर एक parameter module name है और दूसरा empty array है जिसमे module dependencies को declare किया जाता है |

उसके बाद controller() function का इस्तेमाल करके controller create किया गया है | function के पहले parameter पर controller name दिया गया है ये Javascript का function है और दुसरे पर controller का वर्णन करने के लिए function के अन्दर $scope object को pass किया गया है |

$scope object का इस्तेमाल model data को प्राप्त करने के लिए इस्तेमाल किया जाता है | ये object View और Controller को bind करने के लिए इस्तेमाल किया जाता है |

उसके बाद controller द्वारा scope में message इस variable को create किया गया है |



Controller With Function As Variable in AngularJS

Controller में variable के रूप में function(method) को create किया गया है |

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">

<p ng-bind="myFunction()"></p>

<script>  
var myapp = angular.module("app", []);  
myapp.controller("ctrl", function($scope){  
	$scope.message = "Hello World";
	$scope.myFunction = function (){ 
		return $scope.message;
}
});  
</script>  

</div>

</body>
</html>
Output :
Hello World

Controller With Object in AngularJS

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">

<p>{{message.message1}}</p>
<p>{{message.message2}}</p>

<script>  
var myapp = angular.module("app", []);  
myapp.controller("ctrl", function($scope){
	 $scope.message = {
	 message1: 'Hello',
	 message2: 'World'
}
});  
</script>

</div>

</body>
</html>
Output :
Hello

World

Nested Controller in AngularJS

निचे Nested Controller का example दिया गया है | Example पर 'ctrl2' controller ये 'ctrl2' की properties को प्राप्त करने की क्षमता रखता है |

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app">

<div ng-controller="ctrl1">

<div ng-controller="ctrl2">
<p>{{message1}}</p>
<p>{{message2}}</p>
</div>
</div>

<script>
var myapp = angular.module("app", []);  
myapp.controller("ctrl1", function($scope){
	 $scope.message1 = 'Controller 1'
});
myapp.controller("ctrl2", function($scope){
	 $scope.message2 = 'Controller 2'
});
</script>

</div>

</body>
</html>
Output :
Controller 1

Controller 2