AngularJS Controller Tutorial with Example

What is Controller in AngularJs?

A Controllers in AngularJs takes the data from the View, processes the data, and then sends that data across to the view which is displayed to the end user. The Controller will have your core business logic.

The controller will use the data model, carry out the required processing and then pass the output to the view which in turn is displayed to the end user.

In this tutorial, you will learn-

• What Controller does from Angular' s perspective
• How to build a basic Controller
• How to define Methods in Controller
• Using ng-controller in External Files
  1. We are adding references to the bootstrap CSS stylesheets, which will be used in conjunction with the bootstrap libraries.
  2. We are adding references to the angularjs libraries. So now whatever we do with angular.js going forward will be referenced from this library.
  3. We are adding references to the bootstrap library to make our web page more responsive for certain controls.
  4. We have added references to jquery libraries which will be used for DOM manipulation. This is required by Angular because some of the functionality in Angular is dependent on this library.
  1. First we segregate our files into 2 folders as is done with any conventional web application. We have the "CSS" folder. It will contain all our cascading style sheet files, and then we will have our "lib" folder which will have all our JavaScript files.
  2. The bootstrap.css file is placed in the CSS folder and it used for adding a good look and feel for our website.
  3. The angular.js is our main file which was downloaded from the angularJS site and kept in our lib folder.
  4. The app.js file will contain our code for the controllers.
  5. The bootstrap.js file is used to supplement the bootstrap.cs file to add bootstrap functionality to our web application.
  6. The jquery file will be used to add DOM manipulation functionality to our site.
  1. The ng-app keyword is used to denote that this application should be considered as an angular application. Anything that starts with the prefix 'ng' is known as a directive. "DemoApp" is the name given to our Angular.JS application.
  2. We have created a div tag and in this tag we have added an ng-controller directive along with the name of our Controller "DemoController". This basically makes our div tag the ability to access the contents of the Demo Controller. You need to mention the name of the controller under the directive to ensure that you are able to access the functionality defined within the controller.
  3. We are creating a model binding using the ng-model directive. What this does is that it binds the text box for Tutorial Name to be bound to the member variable "tutorialName".
  4. We are creating a member variable called "tutorialName" which will be used to display the information which the user types in the text box for Tutorial Name.
  5. We are creating a module which will attach to our DemoApp application. So this module now becomes part of our application.
  6. In the module, we define a function which assigns a default value of "AngularJS" to our tutorialName variable.
  1. Perform the addition of 2 numbers
  2. Perform the subtraction of 2 numbers
  1. Here, we are just defining a function which returns a string of "AngularJS". The function is attached to the scope object via a member variable called tutorialName.
  2. If the command is executed successfully, the following Output will be shown when you run your code in the browser.
  1. Define a module called "app" which will hold the controller along with the controller functionality.
  2. Create a controller with the name "HelloWorldCtrl". This controller will be used to have a functionality to display a "Hello World" message.
  3. The scope object is used to pass information from the controller to the view. So in our case, the scope object will be used to hold a variable called "message".
  4. We are defining the variable message and assigning the value "Hello World" to it.
  • The controller's primary responsibility is to control the data which gets passed to the view. The scope and the view have two-way communication.
  • The properties of the view can call "functions" on the scope. Moreover events on the view can call "methods" on the scope. The below code snippet gives a simple example of a function.
    • The function($scope) which is defined when defining the controller and an internal function which is used to return the concatenation of the $scope.firstName and $scope.lastName.
    • In AngularJS when you define a function as a variable, it is known as a Method.
  • Data in this way pass from the controller to the scope, and then the data passes back and forth from the scope to the view.
  • The scope is used to expose the model to the view. The model can be modified via methods defined in the scope which could be triggered via events from the view. We can define two way model binding from the scope to the model.
  • Controllers should not ideally be used for manipulating the DOM. This should be done by the directives which we will see later on.
  • Best practice is to have controller's based on functionality. For example, if you have a form for input and you need a controller for that, create a controller called "form controller".
  • The controller's primary responsibility is to create a scope object which in turn gets passed to the view
  • How to build a simple controller using the ng-app, ng-controller and ng-model directives
  • How to add custom methods to a controller which can be used to separate various functionalities within an angularjs module.
  • Controllers can be defined in external files to separate this layer from the View layer. This is normally a best practice when creating web applications.

What Controller does from Angular's perspective

Following is a simple definition of working of Angular JS Controller.





How to build a basic Controller

Before we start with the creation of a controller, we need to first have our basic HTML page setup in place.

The below code snippet is a simple HTML page which has a title of "Event Registration" and has references to important libraries such as Bootstrap, jquery and Angular.



By default the above code snippet will be present in all of our examples, so that we can show just the specific angularJS code in the subsequent sections.

Secondly let's look at our files and file structure which we are going to start with for the duration of our course.



Let see an example on how to use angular.js,

What we want to do here is just to display the words "AngularJS" in both text format and in a text box when the page is viewed in the browser.



<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Code Explanation:

If the command is executed successfully, the following Output will be shown when you run your code in the browser.

Output:



Since we assigned the variable tutorialName a value of "Angular JS", this gets displayed in the text box and in the plain text line.

How to define Methods in Controller

Normally, one would want to define multiple methods in the controller to separate the business logic.

For example, suppose if you wanted to have your controller do 2 basic things,

You would then ideally create 2 methods inside of your controller, one to perform the addition and the other to perform the subtraction.

One can define custom methods within an Angular.JS controller.

The example below shows how this can be done.



<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Code Explanation:

Output:



Using ng-controller in External Files

Let's look at an example of "HelloWorld" where all of the functionality was placed in a single file. Now it's time to place the code for the controller in separate files.

Let's follow the steps below to do this.

Step 1) In the app.js file, add the following code for your controller



angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

The above code does the following things,

Step 2) Now, in your Sample.html file add a div class which will contain the ng-controller directive and then add a reference to the member variable "message"

Also don't forget to add a reference to the script file app.js which has the source code for your controller.



<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

If the above code is entered correctly, the following Output will be shown when you run your code in the browser.

Output:



Summary