Before reading this article I recommend you please go through the previous articles.
AngularJS ControllerTo control the data of AngularJS, controllers are used. A Controller is basically a JavaScript constructor function, Angular will instantiate a new Controller object whenever we attach the ng-controller directive in the DOM.Constructor function as a JavaScript file, besides this file can be used to add an
ng-directive to the HTML
.
We used a parameter to this function that is
$scope.
scope basically refers to the model organised in a hierarchy. We can group model variables inside a JavaScript function with a $scope argument.
![]()
We defined our controller in the HTML with directive
ng-controller, in which we provide the name of JavaScript variable that is defined in a JavaScript file.
Defining a Controller
- function ContactController($scope) {
-
-
-
- }
Purpose of Controller: The Controller exposes the variables and functionality to
directives and
expressions.
In the following example, we will try to show how a Controller and
$scope are used.
Code
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>Using $scope Object</title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
- </head>
- <body>
- <div ng-app="" ng-controller="employeeController">
- Emp Name: <input type="text" ng-model="name"><br>
- Department: <input type="text" ng-model="dept"><br>
- Position: <input type="text" ng-model="position"><br>
- <br>
- Details: {{name + " " + dept +" " + position }}
- </div>
- <script>
- function employeeController($scope) {
- $scope.name = "iShriss",
- $scope.dept = "IT",
- $scope.position = "developer"
- }
- </script>
- </body>
- </html>
Let's check this in the Browser.
![]()
In the preceding example, we defined our application inside a <div> tag using a
ng-app directive, followed by a
ng-controller directive that defines our controller object. We have a standard JavaScript object constructor,
employeeController, that is invoked by a
$scope object.
Using Controller
In the preceding example we do have three variables created by
employeeController. ng-model will bind those input fields to the controller variables. In the preceding example we used that controller object with three variables,we can also used methods as controller variable. Let's see an example.
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>Using Controller Method</title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
- </head>
- <body>
- <div ng-app="" ng-controller="employeeController">
- Emp Name: <input type="text" ng-model="name"><br>
- Department: <input type="text" ng-model="dept"><br>
- Position: <input type="text" ng-model="position"><br>
- <br>
- Details: {{details()}}
-
- </div>
-
- <script>
- function employeeController($scope) {
- $scope.name = "iShriss",
- $scope.dept = "IT",
- $scope.position = "developer",
- $scope.details = function () {
- return $scope.name + " " + $scope.dept + " " + $scope.position;
- }
- }
- </script>
- </body>
- </html>
Output
![]()
Demo example
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>AJS DemoController</title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
- </head>
- <body>
- <h1>AJS ControllerDemo</h1>
- <div ng-app="" ng-controller="employeeController">
- Emp Name: <input type="text" ng-model="employee.name"><br>
- Department: <input type="text" ng-model="employee.dept"><br>
- Position: <input type="text" ng-model="employee.position"><br>
- <br>
- Employee details: {{employee.Details()}}
- </div>
- <script>
- function employeeController($scope) {
- $scope.employee = {
- name: "Adam",
- dept: "Networking",
- position: "admin",
- Details: function () {
- var empObj;
- empObj = $scope.employee;
- return empObj.name + " " + empObj.dept + " " + empObj.position;
- }
- };
- }
- </script>
-
- </body>
- </html>
In the preceding demoExample, we have a controller, employeeController, that is defined as a JavaScript object having
$scope as an argument. Since we know that a
$scope basically refers to the application model that will consume the employeeController object.
The $scope.employee here is a property of the employeeController, $scope.employee has 3 properties declared namely
name.
dept and
position. To return the details of a
$scope.employee object we have a Details function there.
Alternatively we can have a constructor function in a separate JavaScript file. A controller object in a JavaScript file can refer to a HTML page using the
ng-controller directive.
Output of Demo Example ![]()
There are more concepts in AngularJS controller like nested controller, inheritence in Controller. We will definitely touch on those topics in the future articles as well.
Conclusion
This article explained what AngularJS controllers are and how to define them. Also $scope was introduced that is basically used to bind the model values with the views.
So folks, AngularJS is very much fun, isn't it? Happy Coding!