AngularJS Controllers
Controllers:
The controllers are JavaScript functions that are responsible for handling user input and managing data within a particular section of an application. AngularJS controllers are regular JavaScript Objects.
Creation of controllers in AngularJS:
Define a module for an Application:
var myApp = angular.module(‘myApp’, []);
Create the Controller within the module:
myApp.controller(‘myController’, function($scope) {
// controller logic here
});
The ‘$scope’ parameter is used to communicate between the controller and the view.
Use of Controllers:
The controller can be used by ‘ng-controller’
<div ng-app=”myApp” ng-controller=”myController”>
<h1>{{ message }}</h1>
</div>
Explanation:
We defined a variable called ‘message’. In the view, we’re using AngularJS’s data binding syntax ({{ }}) to display the value of this variable.
User handling:
<div ng-app=”myApp” ng-controller=”myController”>
<input type=”text” ng-model=”name”>
<button ng-click=”sayHello()”>Say hello</button>
<p>{{ greeting }}</p>
</div>
When the user clicks the ‘Say hello’ button, AngularJS will call the ‘sayHello()’ function and update the ‘greeting’ variable. This will then be displayed in the view using data binding
Example code:
<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<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>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘personCtrl’, function($scope) {
$scope.firstName = “cuben”;
$scope.lastName = “square”;
$scope.fullName = function() {
return $scope.firstName + “ “ + $scope.lastName;
};
});
</script>
</body>
</html>
Output:
Conclusion:
Finally the controllers are a powerful feature of AngularJS that can be used to create dynamic and responsive web applications. By separating concerns and organizing code, controllers make it easier to manage complex applications and handle user input.
