AngularJS
controller
The AngularJS controller is defined by the
ng-controller
instruction within the
<div>
The AngularJS controller
controls the
data for the AngularJS application.
The AngularJS controller is a regular
JavaScript object.
AngularJS controller
The AngularJS application is controlled by the controller.
The ng-controller
instruction defines the application controller.
The controller is
a JavaScript object,
created by the constructor
of the standard
JavaScript object.
AngularJS instance
<
div
ng-app=
"myApp"
ng-controller=
"myCtrl"
>
name:
<
input
type=
"text"
ng-model=
"firstName"
>
<
br
>
surname:
<
input
type=
"text"
ng-model=
"lastName"
>
<
br
>
<
br
>
Name:
{{firstName + " " + lastName}}
<
/div
>
<
script
>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<
/script
>
Try it out . . .
App resolution:
The AngularJS application is
defined by the ng-app.
The application runs within the .
The ng-controller"myCtrl"
property is an AngularJS instruction.
Used to define a controller.
The myCtrl
function is a JavaScript function.
AngularJS uses the
$scope object
to call the controller.
In AngularJS, the $scope is an application image (belonging to the application variables and functions).
The
controller'$scope
(equivalent to scope, control range) is used to hold the objects of the AngelJS Model (model).
The controller creates two properties in the scope
(firstName
and
lastName).
The ng-model instruction
binds the properties of the input domain to the controller (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 instance
<
div
ng-app=
"myApp"
ng-controller=
"personCtrl"
>
name:
<
input
type=
"text"
ng-model=
"firstName"
>
<
br
>
surname:
<
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
>
Try it out . . .
The controller in the external file
In large applications, controllers are typically stored in external files.
All you
need to do is copy the
code from the label to an external file .js
personController:
AngularJS instance
<div ng-app="myApp" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
Name: {{Person.Firstname + "" + Person.lastname}}
</div>
<script src="personController.js"></script>
Try it out . . .
Other instances
The following instance 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
for namesController .js
:
Then, use the controller file in your app:
AngularJS instance
<
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 out . . .