AngularJS controller


AngularJS Controller Control AngularJS application data.

AngularJS controllers are regular JavaScript objects.

AngularJS Controller

AngularJS applications are controlled by controllers. The

ng-controller directive defines the application controller.

Controllers are JavaScript objects created by the standard JavaScript object constructor.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{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>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Application resolution:

AngularJS applications are defined by ng-app. The application runs within a <div>.

ng-controller="myCtrl" attribute is an AngularJS directive. Used to define a controller.

myCtrl function is a JavaScript function.

AngularJS uses the $scope object to call controllers.

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

The controller's $scope (equivalent to scope, control scope) is used to save the object of the AngularJS Model (model).

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

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

Controller method

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

Controllers can also have methods (variables and functions):

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{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>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


Controller in external file

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

Just copy the code in the <script> tag to an external file named personController.js:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

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

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance


Other examples

The following examples 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: 'deenmark'}
];
## Save the file as nameSController.js:
## Then, then, then, then Use the controller file in the application:

Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<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>

</body>
</html>

Run Instance»

Click "Run Instance" " button to view online examples

←
→