Controller in AngularJS

Name: Components in AngularJS
Brand: LogicMojo
SKU: .
Availability: InStock
Rating: 4.8 (230 reviews)

Back to home

𝑻𝒂𝒃𝒍𝒆 𝒐𝒇 𝑪𝒐𝒏𝒕𝒆𝒏𝒕

What is controller in AngularJS?
Example
Conclusion

Logicmojo - Updated Aug 28, 2021

What is Controller in AngularJS?

In AngularJS, a Controller gets the data from the View, processes it, and then delivers it to the view that is displayed to the end user. Your fundamental business logic will be stored in the Controller. The controller will use the data model to perform the necessary processing before passing the output to the view, which will then display it to the end user.

The flow of data in an AngularJS application is mostly controlled through controllers. To define a controller, use the ng-controller directive. A JavaScript object with attributes/properties and functions is known as a controller. $scope is a parameter that each controller accepts, and it relates to the application/module that the controller must manage.

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

Example

Using the ng-controller directive, we declare a controller named studentController. This is how we define it:

<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 a JavaScript object containing the parameter $scope.
The $scope variable refers to the application that makes use of the studentController object.
The studentController object has a property called $scope.student.
The $scope.student object has two properties: firstName and lastName. We give them the default values.
The combined name is returned via the fullName field of the $scope.student object.
We acquire the student object and then return the combined name in the fullName function.
Note that the controller object can also be defined in a separate JS file and referenced from the HTML page.

We can now use the student property of the studentController with ng-model or 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 binded the student. two input boxes: firstName and student.lastname
HTML was connected to student.fullName().
Now, whenever you type something in the first and last name input boxes, the whole name is immediately updated.

Example

The use of controller is demonstrated in the following example.

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://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: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Conclusion

Angular is a fantastic multi-functional framework that helps you develop faster. It is a strong software development environment that includes dependency injection and deep linking.