AngularJS Controllers

Any AngularJS application is mainly dependent on controllers to control and regulate the data flow in the application. In the application, the controller is defined using the ng-controller directive. AngularJS controllers are regular JavaScript objects, which contain attributes/properties and functions. For every controller, $scope is an accepted parameter which basically refers to the application/module that is to the controlled by the controller.

AngularJS Controller Example

 <div ng-app="myApp" ng-controller="myCtrl">

First Name:  <input type="text" ng-model="firstName"><br>
Last Name:  <input type="text" ng-model="lastName"><br>
 <br>
Full Name: {{firstName + " " + lastName}}

</div>

 <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Mithilesh";
    $scope.lastName = "Kushwaha";
});
</script>													
  

Firstly, we declare an AngularJS controller known as studentController using ng-controller directive. In the next step we define the studentController as follows

 <script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Neha",
         lastName: "Singh",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
 </script>

  • studentController is defined as a JavaScript object with $scope as argument.
  • The application that will use the studentController object is specified by the $scope.
  • $scope.student is known as a property of the defined object studentController.
  • Within the $scope.student object, firstName and lastName are two properties. In this case, default values have been passed to these two properties.
  • fullName is a function of $scope.student object whose job is to return the combined name finally.
  • In the function fullName, we get the student object into the function and the combined name is returned by the function.
  • We can also define the controller object in a totally separate JS file, and later refer to that file in the HTML page, which then runs exactly like a controller.

After that, we can use studentCollector object's student property using ng-model or by writing an expression as follows-

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name:<input type = "text" ng-model = "student.lastName"><br>

You are entering: {{student.fullName()}}

  • Firstly, we bound the properties student.firstName and student.lastName to two different input boxes.
  • Then we bound student.fullName to the HTML.
  • After doing this, whenever we type anything in the first name and last name input boxes, we can see the full name automatically getting updated.

AngularJS Controller In External Files

In larger applications, generally the controllers are stored in external files.

Create an external file named "newController.js" to store controller.

Here, "newController.js" is:

angular.module('myApp', []).controller('personCtrl', function($scope) {  
    $scope.firstName = "Rahul",  
    $scope.lastName = "Singh",  
    $scope.fullName = function() {  
        return $scope.firstName + " " + $scope.lastName;  
    }  
});  

See here example:

<!DOCTYPE html>  
 <html>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
 <body>  
 <div ng-app="myApp" ng-controller="personCtrl">  
First Name:  <input type="text" ng-model="firstName"><br>  
Last Name:  <input type="text" ng-model="lastName"><br>  
 <br>  
Full Name: {{firstName + " " + lastName}}  
</div>  
 <script src="newController.js"></script>  
</body>  
</html>  

Thus, in this tutorial we saw how controllers work in case of an AngularJS application and how crucial they are. In the following tutorial we will see the importance of filters in any AngularJS application and their various uses.