Controllers in AngularJS are the JavaScript object that consist of properties and functions. Controller's main objective is to defines the flow of data in the application. In AngularJS we define controller using ng-controller directive. Whenever a Controller is linked to any DOM by ng-controller directive, AngularJS will instantiate a new Controller object, using the specified controller's constructor function. In this controller constructor an injectable parameter $scope would be available as a parameter.
Whenever a new application is created we need to set up the initial state for the $scope by attaching properties to the to the $scope object.And for that we use controllers in AngularJS.
For Example:
<div ng-app="myApp" ng-controller="WelcomeController">
{{ greeting }}
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('WelcomeController', ['$scope', function($scope) {
$scope.greeting = 'Hello World';
}]);
</script>
In the example above we have seen that $scope properties would be available to the template.
The other use controller is to add behavior to the $scope object.We can add behavior by attaching methods to the $scope object. These methods are then available in the view.
The following example uses a Controller to add a method to the scope which display the full name:
<div ng-app="myApp" ng-controller="homeController">
Enter first Name: <input type="text" ng-model="firstName"><br>
Enter Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('homeController', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
0 Comment(s)