Controlling the flow of your Data is very important. Especially when we are talking about Web Applications. So in this article, we will learn about AngularJS Controllers in the following order:
WHAT ARE ANGULARJS CONTROLLERS?
The application controller is defined by the ng-controller.
Example:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="firstApp" ng-controller="firstCtrl">
Initials: <input type="text" ng-model="Initials"><br>
Middle Name: <input type="text" ng-model="middlename"><br>
<br>
Full Name: {{Initials + " " + middlename}}
</div>
<script>
var app = angular.module('firstApp', []);
app.controller('firstCtrl', function($scope) {
$scope.Initials = "E";
$scope.middlename = "Ari";
});
</script>
</body>
</html>
The application given above is defined by ng-app=”firstApp”.
We also define an AngularJS attribute i.e. ng-controller=”firstCtlr”. This defines the controller. The firstCtrl function is a JavaScript function.
The controller is invoked by using a $scope object by AngularJS. The controller creates two variables in this scope i.e. Initials and middle name. The ng-model directive binds the input field to the controller properties or variables.
CONTROLLER METHODS
A controller can have methods as shown in the example below:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="firstApp" ng-controller="peopleCtrl">
Initials: <input type="text" ng-model="Initials"><br>
Middle Name: <input type="text" ng-model="middleName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('firstApp', []);
app.controller('peopleCtrl', function($scope) {
$scope.Initials = "E";
$scope.middleName = "Ari";
$scope.fullName = function() {
return $scope.Initials + " " + $scope.middleName;
};
});
</script>
</body>
</html>
The code produces the following output:
CONTROLLERS IN EXTERNAL FILES
We can store controllers in external files for larger applications.
To implement this, we create an application.js file with the following code:
angular.module('app',[]).controller('firstCtrl',function($scope)
{
$scope.message = "Ahoy!"
});
The module called app holds the controller along with the controller functionality. The controller is named firstCtrl and is used to display the “Ahoy!” message. The scope object defined in the code is used to pass information from the controller to the view.
In the next step, we create an html file with the div class containing the ng-controller directive. It must be noted that the application.js file must be referenced in the code.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta chrset="UTF 8">
<title>Hello</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> EXAMPLE CONTROLLER</h1>
<div class="container">
<div ng-controller="firstCtrl">{{message}}</div>
</div>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="application.js"></script>
</body>
</html>
The output of the code will be as follows:
The primary responsibility of the controller is to create a scope object and thereby pass it to the view.
With this, we come to an end of this AngularJS Controllers article. Check out the Angular training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.