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.
Following is a simple definition of working of Angular JS Controller.
- 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.
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 is a simple HTML page which has a title of "Event Registration" and has references to important libraries such as Bootstrap, jquery and Angular.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> ViASTUDY 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>
</body>
</html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> ViASTUDY 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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> ViASTUDY 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>
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
app.controller('DemoController', function($scope){
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp',[]);
$scope.tutorialName = "Angular JS";
});
</script>
</body>
</html>
- 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.
Code Explanation:
If the command is executed successfully, the following Output will be shown when you run your code in the browser.
.gif)
0 Comments