AngularJS Controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
Basic Example of controller in AngularJs:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
In AngularJS, everything has a related extension. Degrees are composed in a progressive system. There is a $rootScope object, the guardian of the considerable number of extents of the AngularJS application, and there are degrees made by a few mandates. The extension progressive system is cognizant with the DOM tree pecking order. At whatever point an extension making order is experienced in the DOM tree, another degree is created.Instead of characterizing model variables specifically on the worldwide $rootScope, as we did with the ng-init mandate, we could aggregate them inside a controller, which is just an ordinary JavaScript capacity with a $scope contention.
A controller is characterized in the HTML with a ng-controller mandate determining the name of the JavaScript variable speaking to the controller. In the case, we've characterized thesimpleController variable in a different JavaScript document and that is our controller.
A controller makes another extension, so we can characterize our model variables on that degree. We can likewise characterize capacities on the $scope object.
The $scope contention in the simpleController capacity is the extension related to our new controller. The degree is made for us by AngularJS and made accessible to our controller capacity through Dependency Injection (DI). Reliance Injection just implies that we pronounce that our capacity relies on upon a $scope object (indicating it as a capacity contention) and AngularJS ought to make it accessible for us so we can utilize it inside the capacity.
In the sample, the firstName and lastName variables and the getFullName capacity are characterized in the $scope object oversaw by our simpleController. We don't have to determine the $scope object in the HTML layout since it's certain in the DOM tree established where the ng-controller mandate is indicated.
Basic Example of controller in AngularJs:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>Step 3:-Create Controller:-script.js file
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="simpleController">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>
var mainApp = angular.module("mainApp", []);Description:-
mainApp.controller('simpleController', function($scope)
{
// Initialize the model variables
$scope.firstName = "Bikesh";
$scope.lastName = "Srivastava";
// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});
In AngularJS, everything has a related extension. Degrees are composed in a progressive system. There is a $rootScope object, the guardian of the considerable number of extents of the AngularJS application, and there are degrees made by a few mandates. The extension progressive system is cognizant with the DOM tree pecking order. At whatever point an extension making order is experienced in the DOM tree, another degree is created.Instead of characterizing model variables specifically on the worldwide $rootScope, as we did with the ng-init mandate, we could aggregate them inside a controller, which is just an ordinary JavaScript capacity with a $scope contention.
A controller is characterized in the HTML with a ng-controller mandate determining the name of the JavaScript variable speaking to the controller. In the case, we've characterized thesimpleController variable in a different JavaScript document and that is our controller.
A controller makes another extension, so we can characterize our model variables on that degree. We can likewise characterize capacities on the $scope object.
The $scope contention in the simpleController capacity is the extension related to our new controller. The degree is made for us by AngularJS and made accessible to our controller capacity through Dependency Injection (DI). Reliance Injection just implies that we pronounce that our capacity relies on upon a $scope object (indicating it as a capacity contention) and AngularJS ought to make it accessible for us so we can utilize it inside the capacity.
In the sample, the firstName and lastName variables and the getFullName capacity are characterized in the $scope object oversaw by our simpleController. We don't have to determine the $scope object in the HTML layout since it's certain in the DOM tree established where the ng-controller mandate is indicated.
You have just read an article that categorized by title AngularJs
by title What is controller in AngularJs?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/01/what-is-controller-in-angularjs.html. Thank You!
Author:
Bikesh Srivastava - Sunday, January 17, 2016
Good Post Thanks for sharing this blog. Keep on sharing...
ReplyDeleteAngular JS Online training
Angular JS training in hyderabad
Thanks for sharing this information. I really Like Very Much.
ReplyDeleteangular js online training