AngularJS Controllers

AngularJS ControllersControl the data of an AngularJS application.

AngularJS controllers are conventional JavaScript Object.

AngularJS Controllers

An AngularJS application is controlled by controllers.

The ng-controller directive defines the application controller.

Controllers are created by standard JavaScript object constructors JavaScript Object.

AngularJS Examples

<div ng-app="myApp" ng-controller="myCtrl">  
Name: <input type="text" ng-model="firstName"><br>  
Last name: <input type="text" ng-model="lastName"><br>  
<br>  
Full Name: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

Try It Yourself

Application Description:

An AngularJS application is controlled by ng-app="myApp" Definition. The application runs within <div>.

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

myCtrl A function is a JavaScript function.

AngularJS uses $scope object invokes the controller.

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

Controllers in the scope (firstName and lastName) to create two properties (variables).

ng-model Directives bind input fields to controller properties (firstName and lastName).

Controller methods

The above example demonstrates a controller object with two properties: lastName and firstName.

Controllers can also have methods (as variables of functions):

AngularJS Examples

<div ng-app="myApp" ng-controller="personCtrl">  
Name: <input type="text" ng-model="firstName"><br>  
Last name: <input type="text" ng-model="lastName"><br>  
<br>  
Full name: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  });  
});  
</script>

Try It Yourself

Controllers in external files

It is common to store controllers in external files in larger applications.

Simply copy the code between the <script> tags to a file named personController.js in the external file:

AngularJS Examples

<div ng-app="myApp" ng-controller="personCtrl">  
Name: <input type="text" ng-model="firstName"><br>  
Last name: <input type="text" ng-model="lastName"><br>  
<br>  
Full name: {{fullName()}}  
</div>  
<script src="personController.js"></script>

Try It Yourself

Another example

For the next example, we will create a new controller file:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

Save the file as namesController.js:

Then use the controller file in the application:

AngularJS Examples

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>

Try It Yourself