English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Controllers
  • 时间：2024-12-22

AngularJS - Controllers

Previous Page Next Page  

AngularJS apppcation mainly repes on controllers to control the flow of data in the apppcation. A controller is defined using ng-controller directive. A controller is a JavaScript object that contains attributes/properties, and functions. Each controller accepts $scope as a parameter, which refers to the apppcation/module that the controller needs to handle.

<span ng-app = "" ng-controller = "studentController">
   ...
</span>

Here, we declare a controller named studentController, using the ng-controller directive. We define it as follows −

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

    The studentController is defined as a JavaScript object with $scope as an argument.

    The $scope refers to apppcation which uses the studentController object.

    The $scope.student is a property of studentController object.

    The firstName and the lastName are two properties of $scope.student object. We pass the default values to them.

    The property fullName is the function of $scope.student object, which returns the combined name.

    In the fullName function, we get the student object and then return the combined name.

    As a note, we can also define the controller object in a separate JS file and refer that file in the HTML page.

Now we can use studentController s student property using ng-model or using expressions as follows −

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

    We bound student.firstName and student.lastname to two input boxes.

    We bound student.fullName() to HTML.

    Now whenever you type anything in first name and last name input boxes, you can see the full name getting updated automatically.

Example

The following example shows the use of controller −

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Apppcation</h2>
      
      <span ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         You are entering: {{student.fullName()}}
      </span>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller( studentController , function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Output

Open the file testAngularJS.htm in a web browser and see the result.