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.
Example:
<div ng-app="mapp" ng-controller="myctrl">
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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Dhaval";
$scope.lastName = "Purohit";
});
</script>
* Application explained:
The AngularJS application is defined by ng-app="myapp". The application runs inside the <div>.
The ng-controller="myctrl" attribute is an AngularJS directive. It defines a controller.
The myctrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
In AngularJS, the $scope is the application object (the owner of application variables and functions).
The controller 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 (variables as functions):
Example:
<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>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myapp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "Dhaval";
$scope.lastName = "Purohit";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
* 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:
Example:
<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>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
Another Example:
For the next example we will create a new controller file:
angular.module('myapp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Tejas',country:'India'},
{name:'Dhaval',country:'India'},
{name:'manthan',country:'India'}
];
});
Save the file as namesController.js:
And then use the controller file in an application:
Example:
<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>
0 Comments