I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 3::What is controller in AngularJs?

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>
<!DOCTYPE html>
<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>
Step 3:-Create Controller:-script.js file
var mainApp = angular.module("mainApp", []);
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;
};
});
Description:-
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 Part 3::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, 17 January 2016

There are currently no comments for "Part 3::What is controller in AngularJs?"

Post a Comment

Life Is Complicated, But Now programmer Can Keep It Simple.