AngularJS Controller

Written By:- Isha Malhotra

Controller in AngularJS

As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.

Both view and model is independent to each other. Controller is like bridge between model and view.

Module in angularjs

In this article before starting the example of controller I want to explain what is module in angularjs. Module in angularjs is just like container which is having the business logics, controllers, services etc. it is just like main. As main contain the startup logic and in angularjs we use module for startup.

To create module, we use angular.module function. In this function we pass first parameter as module name and second parameter is dependent module. If don’t have any dependent module then we can leave it as blank.

		
var angmodule= angular.module('mymodule',[])

in this code mymodule is module name and empty array represents that there is no dependency on module.

We can use this module with ng-app in the following manner 


<html data-ng-app="mymodule">		
</html>

Controller in AngularJS

In angularjs controller is javascript function object which works as a mediator between view and model. Controller collects data from Model and pass it to View, i.e html in this case.

$scope in angularjs

$scope is the kind of object which represents the application model. It is used to pass data between view and controller. We can add properties in this scope and we can use it.

Example of Controller

In this example we are creating a controller in which we need to pass data to view i.e. the name of the course along with the fees. So we will write the code in the following manner

Angular JS

10000

<!DOCTYPE html>
<html data-ng-app="mymodule">
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body >
    <div data-ng-controller="course">
        <p>Course: {{ coursename }}</p>
        <p>Fees: {{ fees }}</p>
    </div>
<script>
    
var angmodule= angular.module('mymodule',[]).controller('course', function($scope){
    $scope.coursename='Angular JS';
    $scope.fees='10000';
       
}); 
</script>    
</body>
</html>

Now execute the code and you will get following output 

		
		controller in angularjs
		Figure 1

Multiple Controller in AngularJS

In angularjs we have learnt how to create controller now we are going to add multiple controllers in single module.

We can add multiple controllers to the single module. So I am going to create new controller with the name of trainer in which I want to show the trainer details.

We will use following code to create multiple controller 


angmodule.controller("trainer", function($scope){
    var trainerdetail=[
                    { name:'isha', age:'27' },
                    { name:'avinash', age:'32' },
                    { name:'priya', age:'34' }
                    ];
    $scope.trainerdata=trainerdetail;
});

Now call this controller in your html in the following manner

<div ng-controller="trainer">
    <table border="1">
        <tr>
           <td>Trainer Name</td>
           <td>Trainer Age</td>
        </tr>
        <tr ng-repeat="x in trainerdata">
            <td>{{ x.name }}</td>
            <td>{{ x.age }}</td>
        </tr>
    </table>
</div>

Now execute the code.

Angular JS Controller Example

<!DOCTYPE html>
<html ng-app="mymodule">
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
     <script src="angular.min.js"></script>
    <script>
    
        var angmodule= angular.module('mymodule',[]).controller('course', function($scope){
            
            $scope.coursename='Asp.net';
            $scope.fees='15000';
       
       });
        
        angmodule.controller("trainer", function($scope){
            
            var trainerdetail=[
                
                { name:'isha', age:'27' },
                { name:'avinash', age:'32' },
                { name:'priya', age:'34' }
            ];
             $scope.trainerdata=trainerdetail;
          });
    </script>
    </head>
<body >
  <div ng-controller="course">
   <p>Course: {{ coursename }}</p>
                 <p>Fees: {{ fees }}</p>
            </div>
    <div ng-controller="trainer">
            <table border="1">
            <tr><td>Trainer Name</td><td>Trainer Age</td></tr>
        <tr ng-repeat="x in trainerdata">
            <td>{{ x.name }}</td>
              <td>{{ x.age }}</td>
            
            </tr>
        </table>
            </div>
</body>
</html>

Now execute the code and you will get following output

		
		multiple controller in angularjs
		Figure 2

In the next example we will return the multiple courses name and fees and we will use ng-repeat to display this code.