AngularJS controllers control the data of an AngularJS application and a controller class is attached to the view.
A controller class can be attached to the view using the ng-controller directive. When this is added, AngularJS will instantiate a new Controller object. This object can be instantiated using the controller function after defining your module variable.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {});
</script>
</body>
</html>In AngularJS, the $scope parameter is the application object and is used to set up the initial state of the $scope object and add behaviour to it.
For example, you can set default input values by adding properties to the $scope object.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
First name: <input type="text" ng-model="firstName"><br/>
Last name: <input type="text" ng-model="lastName">
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
$scope.firstName = 'John';
$scope.lastName = 'Doe';
});
</script>
</body>
</html>The above example will set the first name and last name inputs to ‘John’ and ‘Doe’ respectively.
Similar to other classes in programming, AngularJS can contain methods as well as properties. For example, a fullName function.
myApp.controller('myController', function($scope) {
$scope.firstName = 'John';
$scope.lastName = 'Doe';
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});The HTML markup might look like the following.
<div ng-controller="myController">
First name: <input type="text" ng-model="firstName"><br/><br/>
Last name: <input type="text" ng-model="lastName"><br/><br/>
Full name: {{fullName()}}
</div>This will print out the full name as the first and last names are typed in.
You can also use the ng-click directive to execute methods within the controller class.
<div ng-controller="myController">
<button ng-click="redColour()">Red</button>
<button ng-click="blueColour()">Blue</button>
<p>You have clicked {{colour}}!</p>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
$scope.colour = 'nothing';
$scope.redColour = function() {
$scope.colour = 'red';
};
$scope.blueColour = function() {
$scope.colour = 'blue';
};
});
</script>In general, a controller should contain only the business logic needed for a single view. Because there are occasions where there is excessive code within the controllers, the code is usually moved into an external file. This file is then included in the DOM using the <script src> attribute.