Google News
logo
AngularJS controllers
AngularJS controllers control are used to the data of AngularJS applications.  The AngularJS controller  is a JavaScript function that maintains the application data and behavior using $scopeobject . The $scopeobject is a glue between the controller and HTML.

The AngularJS controller is defined "ng-controller" directive. The ng-controller directive is used to specify a controller in HTML element, which will add behavior or maintain the data in that HTML element and its child elements.
AngularJS Controller Example :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Controllers</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
 
<body>  
  
<div ng-app="myApp" ng-controller="myCtrl">  
  
<b>First Name :</b> 
<input type="text" ng-model="first_name" placeholder="First Name"><br /><br />
<b>Last Name :</b> 
<input type="text" ng-model="last_name" placeholder="Last Name"><br />  
<br />  
<h4>Full Name : {{first_name + " " + last_name}} </h4>
  
</div>  
  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.first_name = "V V Ramana";  
    $scope.last_name = "Reddy";  
});  
</script>  
  
</body>  
</html>  
Output :
Code explanation :

Here, the AngularJS application runs inside the <div> is defined by ng-app="myApp".

The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.

The myCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of application variables and functions).

The controller creates two properties (variables) in the scope (firstName and lastName).

The ng-model directives bind the input fields to the controller properties (firstName and lastName).

Controller Methods (variables as functions)
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Controllers Methods</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
 
<div ng-app="myApp" ng-controller="Ctrl_Methods">
 
<b>First Name :</b> <input type="text" ng-model="first_name" placeholder="First Name"><br /><br />
<b>Last Name :</b> <input type="text" ng-model="last_name" placeholder="Last Name"><br>
<br>
<h4>Full Name : {{full_name()}}</h4>
 
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('Ctrl_Methods', function($scope) {
    $scope.first_name = "V V Ramana ";
    $scope.last_name = "Reddy";
    $scope.full_name = function() {
        return $scope.first_name + " " + $scope.last_name;
    };
});
</script>
 
</body>
</html>​
Output :
AngularJS Controller In External Files

In larger applications, generally the controllers are stored in external files.

Create an external file named "external_ctrl.js" to store controller.

<script type="text/javascript">

angular.module('myApp', []).controller('Extn_Ctrl', function($scope) {
    $scope.first_name = "V V Ramana ",
    $scope.last_name = "Reddy",
    $scope.full_name = function() {
        return $scope.first_name + " " + $scope.last_name;
    }
});

</script>
Example Program :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS External Controllers</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>  
</head>
 
 
<div ng-app="myApp" ng-controller="Extn_Ctrl">
 
<b>First Name :</b> <input type="text" ng-model="first_name" placeholder="First Name"><br /><br />
<b>Last Name :</b> <input type="text" ng-model="last_name" placeholder="Last Name"><br>
<br />
<h4>Full Name : {{full_name()}}</h4>
 
</div>
 
<script type="text/javascript" src="external_ctrl.js"></script>
 
</body>
</html>
Output :