AngularJS Controllers (ng-controller Directive) with Examples

  Total Views : 863
  Comments : 0
 
  Keywords : What is controller in angularjs, Use of controllers in angularjs with example, Learn angularjs controller with example, Angularjs controller to handle data in applications with example

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.

AngularJS Controllers

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.

Syntax of AngularJS Controller

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>

Explanation of AngularJS Controller Syntax

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.

Example of AngularJS Controller

Following is the example of using controller in angularjs application.

 

Live Preview

<!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.

Output of AngularJS Controllers Example

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.

AngularJS Controller with Methods

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.

 

Live Preview

<!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.

Output of AngularJS Controller with Method

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

Use Multiple Controllers in AngularJS

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

 

Live Preview

<!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.

Output of AngularJS Multiple Controllers Example

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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User