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:
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name: 'kai', country: 'deenmark'}
];
<!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>
Click "Run Instance" " button to view online examples