Chapter – IV
Control Your App’s Behavior (Controller)
In our previous Hello World example we simply defined
a model [i.e. data.message] in our ng-model directive then we set some
value on it and at the same time get the value from it. But how about we pass a
predefined message to show at start up. Let me clarify what I’m saying. Let’s
modify our Hello World Program to look like this,
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Controller</title>
</head>
<body>
<div ng-controller="messageController">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script>
function messageController($scope) {
$scope.data = {
message: "Fiyaz Hasan"
};
};
</script>
</body>
</html>
</html>
OUTPUT:
All we've done here is shifted the input the h1 tag
in a new div tag. Then we've inserted a new Angular directive
called ng-controller in that div. Angular controllers are just functions with
some extra ordinary capabilities. From a simplest viewpoint, a controller in a
MVC application routes an incoming request [e.g. an URL typed in the
browsers address bar] to a specific business logic section where the
request is parsed and a response is sent back after some logic manipulations.
So, with our ng-controller set to the string messageController,
we are saying that in our script we've a function called messageController
which is responsible for setting the message property of the data object.
As you can see I’ve set the message property value to my name.
Now you can ask that how am I getting the data object’s
message property value without returning the object from the function? Look at
the messageController function again. As you can see I’m passing a variable
named $scope to our messageController function. Well it’s not like I've
came up with a variable name like $scope to pass to my controller function, actually
it’s an Angular defined variable or we can say a provider [We will
talk about providers later]. With this $scope provider we are just sending
the scope of a controller to be active. Which means that only the div
containing ng-controller=”messageController” will flow the data object’s
property values of messageController function. It’s more like we are
defining a specific functionality for a specific area within our document.
Likewise we are able to define controllers as much as we need for our apps to
serve different functionalities for different sections in the document. For
example let's create another controller which will do some math on a number passed
from our UI. The final code look like this,
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Controller</title>
</head>
<body>
<div ng-controller="messageController">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
</div>
<div ng-controller="mathController">
<input type="text" ng-model="data.number" />
<h1>{{data.squareRoot()}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script>
function messageController($scope) {
$scope.data = {
message: "Fiyaz Hasan"
};
};
function mathController($scope) {
$scope.data = {
number: 9,
squareRoot: function () {
return Math.sqrt(this.number);
}
};
};
</script>
</body>
</html>
If you run your app you will see something like this in you
browsing window,
OUTPUT:
So, in our new controller instead of getting a static property
value, we perform a square root function on the number passed from the UI. Look
carefully at
<h1>{{data.squareRoot()}}</h1>
As you can see you are executing a method in the data object
called squareRoot. Syntax written in {{ }} is called expression. You can execute
any kind of property value or functions in the {{ expression }}. You can also
add some filtering and sorting expressions which we will see later.
I guess from now you know how to work with Angular controller.
I will see you in the next post.
