Controller in AngularJS

  • In AngularJS a controller is a JavaScript constructor function.
  • The main job of a controller is to build a model for the view to display. Model is nothing but the data.
  • A controller may call the web service which retrieves the data from the database and this data works as a model for the view.
We can create a controller as follows:

var myController= function( $scope )
{
     $scope.message=”Welcome at CareerRide”;
};


Please refer the given hierarchy of files and folders.

demo

Example: Controller in AngularJS

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js" />
var myApp = angular.module("myModule", []);          //Creating a module
var myController = function ($scope)                    //Creating a controller
{
     $scope.message = "Welcome at CareerRide";
};
myApp.controller("myCont",myController);      //Registering the controller with  Module.


In above example drag the "angular.min.js" file on Script.js page, then you will get the AngularJS intellisense automatically.

You can also create the controller and register it with a single statement.

myApp.controller("myCont", function ($scope)
{
     $scope.message = "Welcome at CareerRide";      
});


Code for Demo.htm file.

<!DOCTYPE html/>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
          <script src="Scripts/Script.js" type="text/javascript"></script>
     </head>
     <body>
          <div ng-controller="myCont">
               {{message}}
          </div>
     </body>
</html>


Output:
Welcome at CareerRide

Just drag the Script.js file on Demo.htm page in head section.

<script src="Scripts/Script.js" type="text/javascript"></script>

Now we will specify the name of our module as a value of ng-app=”myModule” directive so that our application will boot with this module.

Now we will specify our controller with div element so it will invoke the message property.

<div ng-controller="myCont">

You can also write the script file with in the HTML file but it is always better that write script code in separate file. You can debug the code easily if any error came.

Predict the output:

<!DOCTYPE html/>
<html ng-app="myApp">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
     </head>
     <body>
          <div ng-controller="myCont">
               {{message}}
          </div>
          <div>
               {{message}}
          </div>
          <script>
               var app = angular.module("myApp", []);
               app.controller("myCont", function ($scope)
               {
                    $scope.message = "Hello World !!";
               });
          </script>
     </body>
</html>


Solution:

If you are thinking that output will be as

Hello World !!
Hello World !!

Then you are wrong because the ng-controller="myCont" is specified with only one div element, so the output will be single

Hello World !!

If you want output as you were thinking then better apply ng-controller="myCont" with body element.

Now we will discuss some complex object and how to bind those objects with view.

You can create an object as follows

var Employee = {
                              FirstName: "Raj",
                              LastName: "Parihar",
                              Gender: "Male"
                         };


Here FirstName, LastName and Gender are the properties of Employee. After creating the object, attach this object with $scope. Now you can access the properties of employee object in html page.

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js" />
var myApp = angular.module("myModule", []);
var myController = function ($scope)
{
     var Employee = {
                                   FirstName: "Raj",
                                   LastName: "Parihar",
                                   Gender: "Male"
                              };
     $scope.Emp = Employee;
};
myApp.controller("myCont",myController);


Code for Demo.htm file.

<!DOCTYPE html/>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
          <script src="Scripts/Script.js"></script>
          <style>
               table, th, td
                {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
                {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
                {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body>
          <div ng-controller="myCont">
               <table border="0">
                    <tr>
                         <td>FirstName:</td><td>{{Emp.FirstName}}</td>
                    </tr>
                    <tr>
                         <td>LastName:</td><td>{{Emp.LastName}}</td>
                    </tr>
                    <tr>
                         <td> Gender:</td><td>{{Emp.Gender}}</td>
                    </tr>
               </table>
          </div>
     </body>
</html>


Output:
scriptjs
▲