Welcome to FindNerd. Today we are going to discuss angularJS controllers. A controller in angularJS is nothing but a regular javascript object which provides attributes, properties and functions to the angularJS application. In angular application controller plays with data and controls the flow of the data. We can defin the controller by a javascript constructor function. We pass the scope as an argument in constructor function. ng-controller directive is used to add the controller to the DOM.
// Basic Example
<div ng-app = "" ng-controller = "findnerdController">
...
</div>
<script>
function findnerdController($scope) {
$scope.findnerd = {
address: "Doon IT Park",
city: "Dehradun",
fullAddress: function() {
var findnerdObject;
findnerdObject = $scope.findnerd;
return findnerdObject.address + " " + findnerdObject.city;
}
};
}
</script>
In above code we have attached the controller findnerd in DOM and created the controller using scope as argument. We have defined two properties address and city, we have also defined a function to return the full address. $scope.findnerd is also a property. You can create a separate file for the controller and add this file to HTML file or you can also define the controller on same HTML file.
Controller in separate file
// findnerd.js
var findnerdApp = angular.module('findnerdApp',[]);
findnerdApp.controller('findnerdController', ['$scope', function($scope) {
$scope.findnerd = {
address: "Doon IT Park",
city: "Dehradun",
fullAddress: function() {
var findnerdObject;
findnerdObject = $scope.findnerd;
return findnerdObject.address + " " + findnerdObject.city;
}
};
}]);
<div ng-app = "findnerdApp" ng-controller = "findnerdController">
Company address: <textarea rows="10" cols="17" ng-model = "findnerd.address"></textarea><br>
Company city: <input type = "text" ng-model = "findnerd.city"><br>
<br>
You have entered: {{findnerd.fullAddress()}}
</div>
You can type the address and city in textarea and input field respectively and they will show combined address using fullAddress function.
Scope inheritance example
<html ng-app>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/findnerd.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="findnerd">
<div ng-controller="primaryController">
<p>CTO {{empId}}, {{CTO}} {{salary}}!</p>
<div ng-controller="baseController">
<p>CTO {{empId}}, {{CTO}} {{salary}}!</p>
<div ng-controller="secondaryController">
<p>CTO {{empId}}, {{CTO}} {{salary}}!</p>
</div>
</div>
</div>
</div>
<style>
div.findnerd div {
padding: 10px;
border: solid 2px blue;
}
<style>
<body>
</html>
// findnerd.js
var findnerdApp = angular.module('scopeInheritance', []);
findnerdApp.controller('primaryController', ['$scope', function($scope) {
$scope.CTO = 'Arvind khanna';
$scope.empId = 'E34';
$scope.salary = 120000;
}]);
findnerdApp.controller('baseController', ['$scope', function($scope) {
$scope.CTO = 'Sonia mahania';
$scope.empId = 'E54';
}]);
findnerdApp.controller('secondaryController', ['$scope', function($scope) {
$scope.CTO = 'Mona hasan';
$scope.empId = 'E52';
$scope.salary = 90000;
}]);
In above example we have defined one controller inside other controller. There are three main controller. Top controller is primary, inside primary controller base controller and inside base controller we have secondary controller. We are trying to display CTO names, salaries and employee ids using findnerd controller.
Thank you for being with us!
0 Comment(s)