Control Your App’s Behavior (Angular.js Controllers)

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>

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.