AngularJS Controllers
AngularJS controllers control the data of AngularJS
applications.
AngularJS controllers are regular JavaScript Objects.
AngularJS Controllers
AngularJS applications are controlled by controllers.
The ng-controller
directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
AngularJS Example
<div ng-app="" ng-controller="personController">
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>
function personController($scope) {
$scope.firstName="John",
$scope.lastName="Doe"
}
</script>
Try it Yourself »
Application explained:
The AngularJS application is defined by ng-app. The application
runs inside a <div>.
The ng-controller directive names the
controller object.
The personController function is a standard JavaScript
object constructor.
AngularJS will invoke personController with a $scope object.
In AngularJS, $scope is the application object (the owner of application
variables and functions).
The personController creates two properties (variables) in the scope
(firstName and
lastName).
The ng-model directives bind the input fields to
the controller properties (firstName and lastName).
Controller Methods
The example above demonstrated a controller object with two properties: lastName and firstName.
A controller can also have methods (functions as object properties):
AngularJS Example
<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName
= "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
}
</script>
Try it Yourself »
Controllers In External Files
In larger applications, it is common to store controllers in
external files.
Just copy the code between the <script> tags into an external file named
personController.js:
AngularJS Example
<div ng-app="" ng-controller="personController">
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 »
Another Example
For the next example we will create a new controller file:
function namesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
And then use the controller file in an application:
AngularJS Example
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
Color Picker
