Here we are discussing the AngularJS Controllers. The main purpose of controllers is to control the data flow in AngularJS applications. The controllers use ng-controller directives for controlling the flow of data. Basically, the controllers are the objects of JavaScript. They may have attributes, properties, and functions.

The controller accepts $scope as a parameter which refers to the application or module that controller is going to control.

Use AngularJS Controllers

First, you have to declare the name of a controller using ng-controller directive. See the code below.

<div ng-app="" ng-controller="tutorialPaceController">

</div>

In the above code we are declaring “tutorialPaceController” using ng-controller directives.

Secondly, you have to define “tutorialPaceController”. The below code shows the definition of “tutorialPaceController”.

<script>
   function tutorialPaceController($scope) {
      $scope.student = {
         firstName: "Junaid",
         lastName: "Shahid",
         
         fullName: function() {
            var TempObject;
            TempObject = $scope.student;
            return TempObject.firstName + " " + TempObject.lastName;
         }
      };
   }
</script>

Code Description:

  • We have defined “tutorialPaceController” as an object of JavaScript and $scope as an argument of “tutorialPaceController”.
  • $scope is referring to an application which is using “tutorialPaceController” object.
  • $scope.student is defining the “tutorialPaceController” object.
  • We have passed the default values to firstName and the lastName which are the properties of $scope.student.
  • The purpose of a fullName function is to combine firstName and lastName value.
  • fullName function is getting the student object and return the combine name.

The task to do!

Define the controller object in separate JS file and place the reference in your HTML file. Now you can use “tutorialPaceController” as follows.

First name: <input type = "text" ng-model = "student.firstName"><br>
Last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
Combination: {{student.fullName()}}

The above code will always return the value by combining firstName and LastName.

Example:

Below example showing the use of the controller.

<html>
   <head>
      <title>TutorialPace | AngularJS Controller Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>TutorialPace | AngularJS Controller Example</h2>
      
      <div ng-app = "tutorialPaceApp" ng-controller = "tutorialPaceController">
         First name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         Combination: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("tutorialPaceApp", []);
         
         mainApp.controller('tutorialPaceController', function($scope) {
            $scope.student = {
               firstName: "Tutorial",
               lastName: "Pace",
               
               fullName: function() {
                  var TempObject;
                  TempObject = $scope.student;
                  return TempObject.firstName + " " + TempObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Download Example File

From the above tutorial we learned controller in AngularJS. The controllers are basically use to control the flow of data of the AngularJS Application. They have to control the data of the AngularJS Applications. The ng-controllers from the directives allow the controllers to control the flow of data.

In the simple words, the controllers are the objects of JavaScript and these object take the values in the form of parameter, attributes or properties but, they can have only one vale at the same time.