Here we will learn controllers in angularjs with example, use controller with functions/ methods example and how to use multiple controllers in angularjs with example and how to access variables and function values in angularjs applications with simple examples.
The controllers in angularjs is used to control data of angularjs applications. The AngularJs controller is an object that is created by using JavaScript constructor.
The angularjs controller will handle DOM elements with the help of using ng-controller directive.
Following is the way of defining controller and accessing with ng-controller directive in angularjs application.
<script type="text/javascript">
var app = angular.module('angularctrlapp', []);
app.controller('angularctrl', function ($scope) {
$scope.msg = 'Welcome to Tutlane.com';
});
</script>
<div ng-app="angularctrlapp" ng-controller="angularctrl">
{{msg}}
</div>
If you observe above syntax we mentioned ng-app it will act as a starting point of angularjs application and angularjs functionality will be applicable to the elements inside of div. For more info on ng-app check this angularjs ng-app directive.
Generally we will define controller with angularjs module. If you observe above code we defined angularjs module with variable “app” and adding controller to that module. To access controller properties in angularjs application we will use ng-controller directive. If you observe we are accessing controller properties by defining ng-controller="angularctrl". Here angularctrl is a JavaScript function.
In angularjs controllers are invoked by using angularjs $scope object because of that we initialized $scope object in controller function.
What is $scope? The $scope in angularjs is an application object. It holds all the variables and functions of controller and allow us to access those variables and function in application view.
If you observe above syntax we are able to access “msg” variable in view because of defining variable “msg” with $scope object. We will learn more about $scope in next chapters.
Now we will see how to use controllers in angularjs application with full example.
Following is the example of using controller in angularjs application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Controllers Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularctrlapp', []);
app.controller('angularctrl', function ($scope) {
$scope.fname = "Welcome to";
$scope.lname = "Tutlane";
});
</script>
</head>
<body>
<div ng-app="angularctrlapp" ng-controller="angularctrl">
First Name: {{fname}}<br />
Last Name: {{lname}}<br />
Full Name: <b>{{fname +" "+ lname}}</b>
</div>
</body>
</html>
If we run above example we will get $scope variables fname and lname values from controller and we can show it in application.
Following is the result of using controllers in angularjs applications.
First Name: welcome to
Last Name: Tutlane
Full Name: welcome to Tutlane
In controller we can define functions / methods and we can access that functions in our angularjs applications.
In angularjs controller we can define methods / functions and access those function values in our angularjs application. We will see how to create methods in angularjs controller with simple example. Write the code like as shown following to create function in controllers.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Controller with Function Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularctrlapp', []);
app.controller('angularctrl', function ($scope) {
$scope.fname = "Welcome to";
$scope.lname = "Tutlane";
$scope.getname = function () {
return $scope.fname +" "+ $scope.lname;
};
});
</script>
</head>
<body>
<div ng-app="angularctrlapp" ng-controller="angularctrl">
First Name: {{fname}}<br />
Last Name: {{lname}}<br />
Full Name: <b>{{getname()}}</b>
</div>
</body>
</html>If you observe above code we defined function “getname()” and accessing that method in our angularjs application to show the full name. Now we will run the application and will how to the output will be.
Following is the result of creating method in angularjs controller and accessing that method values in application.
First Name: welcome to
Last Name: Tutlane
Full Name: welcome to Tutlane
In angularjs we can create multiple controllers in application based on requirement. Suppose in our application we have different modules we can create separate controller for each module and we can use respective controller for respective module in angularjs application.
Following is the example of creating multiple controllers in angularjs application
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs with Multiple Controllers Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularctrlapp', []);
app.controller('angularctrl1', function ($scope) {
$scope.fname1 = "Welcome to";
$scope.lname1 = "Tutlane";
$scope.getname1 = function () {
return $scope.fname1 +" "+ $scope.lname1;
};
});
app.controller('angularctrl2', function ($scope) {
$scope.fname2 = "Suresh";
$scope.lname2 = "Dasari";
$scope.getname2 = function () {
return $scope.fname2 +" "+$scope.lname2;
};
});
</script>
</head>
<body ng-app="angularctrlapp">
<b>First Controller</b><br /><br />
<div ng-controller="angularctrl1">
First Name: {{fname1}}<br />
Last Name: {{lname1}}<br />
Full Name: <b>{{getname1()}}</b>
</div><br />
<b>Second Controller</b><br /><br />
<div ng-controller="angularctrl2">
First Name: {{fname2}}<br />
Last Name: {{lname2}}<br />
Full Name: <b>{{getname2()}}</b>
</div>
</body>
</html>
If you observe code we defined two separate controllers along with angularjs module and using those controllers to bind data in two divs.
Following is the reuslt of using multiple controllers in angularjs application.
First Controller
First Name: welcome to
Last Name: Tutlane
Full Name: welcome to Tutlane
Second Controller
First Name: Suresh
Last Name: Dasari
Full Name: Suresh Dasari
This is how we can define and use controllers in angularjs applications based on our requirements.