Articles → ANGULAR.JS → Controllers in angular.js

Controllers in angular.js

In this article, we will discuss controllers in angular.js. I have searched various technical blogs and most of them write the same line about controllers – A controller controls the data.

Fair enough I will state the same definition – A controller controls the data in angular.js. Controlling the data means we can define data source inside the controller.

Syntax

var app = angular.module('app_name', []);
app.controller('controller_name', function($scope) {});

In the preceding syntax, we are creating a variable ‘app’ by calling angular.module method. Inside the module method, we are passing the application name (defined in the ng-app directive).

After that, we have called controller method and pass controller name inside it. In the preceding syntax both application names and controller names are custom names i.e. you can define any names, according to your application requirement.

In the next part of the code, you can see that we have defined a function with parameter name $scope (you cannot change the name of this parameter). Inside the function, you can define the logic on how to get the data from the data source. $scope is an object that connects view (HTML controls) and controller.

Example

Consider the following code

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
	<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	<script type="text/javascript">
	var app = angular.module('app', []);
	app.controller('myController', function($scope) {
		$scope.Name = "gyan";
		$scope.Age = 6;
		$scope.URLMethod = function() {
			return "gyansangrah.com"
		}
	});
	</script>
</head>

<body>
	<form id="form1" runat="server">
		<div ng-app="app" ng-controller="myController"> Name: {{Name}}
			<br /> Age:
			<input type="text" ng-model="Age" />
			<br /> URL: {{URLMethod()}} </div>
	</form>
</body>

</html>

Now run the code

Picture showing how the data is bound to controls using angular.js controller

Click to Enlarge

In the preceding code, I have bound application data by three ways

   1. Using expressions ({{ }})

   2. Using ng-model

   3. Using method inside the expression.

One more example

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
	<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	<script type="text/javascript">
	var app = angular.module('app', []);
	app.controller('myController', function($scope) {
		$scope.Name = '';
		$scope.Country = '';
		$scope.SetData = function() {
			$scope.Name = "Karan";
			$scope.Country = "India";
		}
	});
	</script>
</head>

<body>
	<form id="form1" runat="server">
		<div ng-controller="myController" ng-app="app"> My Name is : {{Name}}
			<br /> My Country is : {{Country}}
			<input type="button" value="Set" ng-click="SetData()" /> </div>
	</form>
</body>

</html>

In the preceding code, I am setting the value of variables on button click. The output will be

Picture showing the binding of data from the controller on button click

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, June 12, 2015

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250