AngularJS controller
The AngularJS controller controls the data of the AngularJS application.
AngularJS controllers are regular JavaScript objects.
AngularJS controller
The AngularJS application is controlled by the controller.
The ng-controller directive defines the application controller.
Controllers are JavaScript objects, created by standard JavaScript object constructors.
AngularJS 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">
First name: <input type = "text" ng-model = "firstName"> <br>
Last Name: <input type = "text" ng-model = "lastName"> <br>
<br>
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>
</ body>
</ html>
operation result:
First name:
john
Surname:
Doe
Name: John Doe
AngularJS applications are defined by ng-app. The application runs inside <div>.
The ng-controller = "myCtrl" attribute is an AngularJS directive. Used to define a controller.
The myCtrl function is a JavaScript function.
AngularJS uses the $ scope object to call the controller.
In AngularJS, $ scope is an application icon (belonging to application variables and functions).
The controller's $ scope (equivalent to scope and control scope) is used to save AngularJS Model (model) objects.
The controller creates two attributes (firstName and lastName) in the scope.
The ng-model directive binds the input domain to the controller's attributes (firstName and lastName).
Controller method
The example above demonstrates a controller object with two properties lastName and firstName.
The controller can also have methods (variables and functions):
AngularJS 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">
First name: <input type = "text" ng-model = "firstName"> <br>
Last Name: <input type = "text" ng-model = "lastName"> <br>
<br>
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>
</ body>
</ html>
running result:
First name:
john
Surname:
Doe
Name: John Doe
Controller in external file
In large applications, the controller is usually stored in an external file.
Just copy the code in the <script> tag to an external file named personController.js:
AngularJS 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">
First name: <input type = "text" ng-model = "firstName"> <br>
Last Name: <input type = "text" ng-model = "lastName"> <br>
<br>
Name: {{firstName + "" + lastName}}
</ div>
<script src = "personController.js"> </ script>
</ body>
</ html>
operation result:
First name:
John
Surname:
Doe
Name: John Doe
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 as namesController.js:
Then, use the controller file in the application:
AngularJS 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 = "namesCtrl">
<ul>
<li ng-repeat = "x in names">
{{x.name + ',' + x.country}}
</ li>
</ ul>
</ div>
<script src = "namesController.js"> </ script>
</ body>
</ html>
running result:
Jani, Norway
Hege, Sweden
Kai, Denmark
The above is the collation of the AngularJS controller data, which will be supplemented later.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
