AngularJS - Controllers

A javascript constructor function. The job of controller is to build a model (data) for the view to display. Controller can also call a webservice to get the data.

Controllers control the data of AngularJS applications and are regular JavaScript Objects.

Creating a controller: 

• First Way:

                      First create the module
                                    var myApp = angular.module(“myApp”, []);

                     Create a javascript constructor function

var myController = function ($scope) {

                $scope.Message = “Hello World!”;

}

                       Register controller to the module:

                                  myApp.controller(“myController”, myController);

• Second way: - We can create the controller without specifying the controller variable

                        First create the module

                                  var myApp = angular.module(“myAPp”, []);

                        Create & Register the controller to the module in single line:
                                   myApp.controller(“myController”, function ($scope){

                $scope.Message = “Hello World!”;

});

• Third way: - Using method chaining create the module and controller in one line

angular.module(“myAPp”, []);

.controller(“myController”, function ($scope){

                $scope.Message = “Hello World!”;

});

A controller can also have methods (variables as functions) and complex objects. Example: Adding complex object and passing more parameters to the controller.

myApp.controller(“myController”, [$scope, “testService” function ($scope, testService){

                $scope.message = “Hello World!”;         //assigning string

var employee = {

                                firstName: “Pratibha”,

                                lastName: "Hyanki”,

                                gender: “Female”

};

$scope.employee = employee; //assigning complex object

$scope.testData = tesService.getData(); //angularJS custom service that gets the data from webservice. We will look into AngularJS services in my upcoming post.

}]);

In the above examples the message property which is being attached to $scope object is the model not the $scope object.

Object $scope:

• The $scope is an object with available properties & methods which binds the html (view) and JavaScript (controller).
• $scope is angular object that is passed to the controller by the framework automatically. We attach the model to this $scope object, which is then be available in the view. In the view we use binding expressions to retrieve the data from $scope object. While using binding expression to retrieve the data in view we don’t need to access properties or methods by prefixing $scope, they are directly accessed.
• In AngularJS, $scope is the application object (the owner of application variables and functions).

Object $rootScope

• All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive.
• The rootScope is available in the entire application.
• If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

$scope vs $rootScope

$rootScope is available globally (for all controllers), whereas $scope is only available to the controller that has created it and it's children.

Things to Note:

• In larger applications, it is common to store controllers in external JavaScript files. 

• Using ng-controller directive invokes the controller. Example: <div ng-controller=" myController ">  The sections which are inside the above <div> tag will be controller by the “myController” controller.

• In above examples the controller is not directly manipulating the DOM object, so it is maintaining the clean separation between Model, View and Controller. Hence while writing the controllers, keep in mind that you are not breaking that clean separation between the 3 components. Controllers should only be used for setting up the initial state of the $scope object (example: message property in the above examples) and adding behaviors to it.

• When Controller name is misspelled, two things happen.
• An error is being raised which can be viewed by using browser developer tools.
• The binding expression in the view that are in the scope of the controller will not be evaluated.

• When binding expression is misspelled:
• No errors are being raised.
• It just returns null or undefined.