AngularJSTopics

AngularJS Controllers:-
AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions.

Each controller accepts $scope as a parameter which refers to the application/module that controller is to control. 
  

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


Here we've declared a controller studentController using ng-controller directive. As a next step we'll define the studentController 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>


Explanation of above program:-
  1. studentController defined as a JavaScript object with $scope as argument.
  2. $scope refers to application which is to use the studentController object.
  3. $scope.student is property of studentController object.
  4. firstName and lastName are two properties of $scope.student object. We've passed the default values to them.
  5. fullName is the function of $scope.student object whose task is to return the combined name.
  6. In fullName function we're getting the student object and then return the combined name.
  7. As a note, we can also define the controller object in 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()}}


  1. We've bounded student.firstName and student.lastname to two input boxes.
  2. We've bounded student.fullName() to HTML.
  3. Now whenever you type anything in first name and last name input boxes, you can see the full name getting updated automatically.
Example:- 
  

<html>
   
   <head>
      <title>Angular JS Controller</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div 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()}}
      </div>
      
      <script>
          var mainApp = angular.module("mainApp", []);

          mainApp.controller('studentController', function ($scope) {
              $scope.student = {
                  firstName: "Santosh Kumar",
                  lastName: "Singh",

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


Run the application and get OUT PUT as shown in below image:-