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.
- 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".
- We are adding references to the bootstrap CSS stylesheets, which will be used in conjunction with the bootstrap libraries.
- We are adding references to the angularjs libraries. So now whatever we do with angular.js going forward will be referenced from this library.
- We are adding references to the bootstrap library to make our web page more responsive for certain controls.
- 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.
- 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.
- The bootstrap.css file is placed in the CSS folder and it used for adding a good look and feel for our website.
- The angular.js is our main file which was downloaded from the angularJS site and kept in our lib folder.
- The app.js file will contain our code for the controllers.
- The bootstrap.js file is used to supplement the bootstrap.cs file to add bootstrap functionality to our web application.
- The jquery file will be used to add DOM manipulation functionality to our site.
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> </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:
- 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.
- 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.
- 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".
- 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.
- We are creating a module which will attach to our DemoApp application. So this module now becomes part of our application.
- In the module, we define a function which assigns a default value of "AngularJS" to our tutorialName variable.
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,
- Perform the addition of 2 numbers
- Perform the subtraction of 2 numbers
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:
- 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.
