AngularJS Controller: A Controller is an object that manages other objects in the app. The controller does not know specifics about the object it controls, however it knows how to access the object, how to get information about it, or how to pass it to the view for display. If your application has an object such as a student, it will also have a student controller.
The MVC framework is completed through controllers. These controllers are used to regulate the data and flow of AngularJS applications. Controllers are added to HTML elements through directives that are implemented as JavaScript Objects, which contain properties and functions. They supplement the application scope by establishing its state and by giving it specific behaviors.
The ng-controller directive is used to define the Angular)JS controller. The $scope parameter refers to the application or module which is to be handled by a specific controller. Because the model and the view are synchronized, a controller can be totally separated from the view and simply operate on the model data. Due to AngularJS data binding in, the view will always reflect changes made in the controller.
AngularJS Controller Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="example App" ng-controller="exampleCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last_Name: <input type="text" ng-model="last_name"><br>
<br>
Full Name: {{first Name +" "+last name}}
</div>
<Script>
var app = angular.module('exampleApp', []);
app.controller('exampleCtrl', function($scope) {
$scope.firstName = "eBook";
$scope.last_name = "Reader";
});
</script>
</body>
</html>
Angular JS Controller Example Output
AngularJS Controller Methods
The methods also included in the controller. For example, variable as functions
Controller Methods Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="example App" ng-controller="exampleCtrl">
First: <input type="text" ng-model="firstName"> <br>
Last: <input type="text" ng-model="last_name"><br>
<br>
Full Name: {{Full Name()}}
</div>
<Script>
var app = angular.module('exampleApp', []);
app.controller('exampleCtrl', function($scope) {
$scope.FirstName="eBook";
$scope.LastName ="Reader";
$scope.fullName = function() {
return $scope.FirstName + " " + $scope.LastName;
};
});
</script>
</body>
</html>
Controller Methods Example Output
