AngularJS Controller

AngularJS Controllerscontrolthe data of AngularJS applications.

AngularJS controllers are regularJavaScript objects。

AngularJS Controllers

AngularJS applications are controlled by controllers.

ng-controllerThe directive defines the application controller.

Controllers areJavaScript objects, by standard JavaScriptobject constructorcreated.

AngularJS Example

<div ng-app="myApp" ng-controller="myCtrl">

First 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 = "John";
    $scope.lastName = "Doe";
});
</script>

Try it Yourself »

Application analysis:

AngularJS application isng-appdefined. The application runs inside <div>.

ng-controller="myCtrl"The attribute is an AngularJS directive. It is used to define a controller.

myCtrlThe function is a JavaScript function.

AngularJS uses$scopethe object to call the controller.

In AngularJS, $scope is an application object (belonging to application variables and functions).

The controller's$scope(equivalent to scope, control range) is an object used to store the AngularJS Model.

The controller creates two properties in the scopefirstNameandlastName)。

ng-modelThe directive binds input fields to the controller's properties (firstName and lastName).

Controller Methods

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

Controllers can also have methods (variables and functions):

AngularJS Example

<div ng-app="myApp" ng-controller="personCtrl">

First 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 = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

Try it Yourself »

Controllers in External Files

In large applications, controllers are usually stored in external files.

Simply copy the code in the <script> tag to the namedpersonController.jsexternal file: that's it:

AngularJS Example

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

Try it Yourself »

Other Examples

The following example creates 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 asnamesController.js:

Then, use the controller file in the application:

AngularJS Example

<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 »
Other Extensions