In Angular, a Controller is defined by a JavaScript constructor function. We can attach any controller to the view using the
ngController directive. After using this directive, the view and controller start to share the same scope.
How it Works
When a Controller is attached to the DOM via the
ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.
Scopes ($scope)
Scope is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to view.
Imaging $scope as an object that links Controller to the View. It is controllers responsibility to initialize the data that the view needs to display. This is done by making changes to $scope.
Creating a Controller
The controller() method is used to create a controller section. The syntax to create a controller is as follows:
var aModule = angular.module("<moduleName>", ["<injectedModule1>", "<injectedModule2>"]);
aModule.controller('<controllerName>', ['<injector1>', '<injector2>',
function(injector1, injector2) {
//Definition of the controller
}
]);Some parameters used in the preceding syntax to create a controller section are as follows:
| Property | Description |
|---|
| <controllerName> | This represents the name of the controller created using the AngularJS library |
| <injector> | In the above syntax, injector1 and injector2 are individual modules that are injected to be used by the controller scope. |
A controller scope can be defined inside HTML DOM using the
ng-controller directive. The following code shows the use of the controller directive in the
HTML file:
There is another way to attach a controller to a specific view. We will learn how to create a single-page application using the $route service. To avoid undesired duplicated behavior, remember to avoid the
ngController directive while using the
$route service.
Defining the controller in DOM
<div ng-controller="<controllerName>">
<!-- HTML element inside the controller scope -->
</div>
snippet
<!doctype html>
<html ng-app="payroll">
<head>
<title>Employee Details</title>
<script src="angular.js"></script>
<script>
var payroll = angular.module("payroll", []);
payroll.controller("payrollController", function($scope) {
$scope.firstName = "David";
$scope.lastName = "Pop";
$scope.designation = "Engineer";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</head>
<body ng-controller="payrollController">
</body>
</html>
- payrollController is a plain JavaScript function.
- In the payrollController function, there is an object $scope which we pass as an argument. This object is used to bind the controller with view. When AngularJS initialize this controller, it automatically creates and injects the $scope object to this function using dependency injection.
- $scope object is created by Angular and injected in this controller function.
