AngularJS controller adds functionality to the $scope of the view.
When we create a controller, AngularJS passes it a new $scope.
We can use controller to set up an initial value and add custom behavior to the $scope object.
Declaring the ng-controller attribute on an element
makes all of the elements inside of the element belong to the controller.
The controller function takes one parameter, the $scope of the element.
$scope object, available on the element and the controller,
is the bridge between the controller and the view.
The following code shows how to create a controller.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head><!--from ww w.jav a 2s.co m-->
<body>
<div ng-controller="MyController">
<h1>{{ person }}</h1>
and their name:
<h2>{{ person.name }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Angular JS"
};
});
</script>
</body>
</html>
The code above is rendered as follows:
The following example creates an object and wraps the data as its properties.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script><!--from w w w. ja va 2 s . co m-->
</head>
<body>
<div ng-controller="SimpleController">
<h1>Hello {{ myDateTime.now }}!</h1>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.myDateTime = {
now: new Date()
};
var updateMyDateTime = function() {
$scope.myDateTime.now = new Date()
};
setInterval(function() {
$scope.$apply(updateMyDateTime);
}, 1000);
updateMyDateTime();
};
</script>
</body>
</html>
The code above is rendered as follows:
We can add action handler method in controller and call these method from view. The action can be fired by an anchor link or a form button. We just need to call the method on the controller.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head><!-- ww w . j a va 2 s. co m-->
<body>
<div ng-controller="MyController">
<button ng-click="add(1)">Add</button>
<a href="#" ng-click="subtract(2)">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) {
$scope.counter += amount;
};
$scope.subtract = function(amount) {
$scope.counter -= amount;
};
}]);
</script>
</body>
</html>
The code above is rendered as follows:
The code above defined a controller named MyController.
In MyController it defined two methods and one property. One method adds value to
the property by one. The other method subtracts the property by two.
The value property is binded to the h4 while the two methods are called from a button
and an anchor.
ng-click directive binds the click event to the method handler.
By default, if AngularJS cannot find a property on a local scope it will check the parent scope and look for the property or method until it reaches the $rootScope.
In the following code ChildController is the child of ParentController. The ParentController's $scope object is the parent of the ChildController's $scope object. We can reference data on the ParentController's $scope from the ChildController's $scope.
<!doctype html>
<html ng-app="myApp">
<head>
<title>Simple App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head><!--from w w w . j ava 2 s. c o m-->
<body>
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a href="#" ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ParentController', function($scope) {
$scope.person = { hasCellPhone: false };
})
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = "ChildName";
$scope.person.hasCellPhone = true;
$scope.person.duty = "coding";
$scope.person.age = 23;
}
})
</script>
</body>
</html>
The code above is rendered as follows:
This nested structure of controllers resembles the DOM structure.