Java Learning: AngularJS - What is “$rootScope” and how is it related with “$scope”?

Thursday, November 5, 2015

AngularJS - What is “$rootScope” and how is it related with “$scope”?

Ref:- http://www.codeproject.com/Articles/891718/AngularJS-Interview-Questions-and-Answers#Whatarecontrollersandneedofng-controllerandng-modelinAngular

“$rootScope” is a parent object of all “$scope” angular objects created in a web page.

Let us understand how Angular does the same internally. Below is a simple Angular code which has multiple “DIV” tags and every tag is attached to a controller. So let us understand step by step how angular will parse this and how the “$rootScope” and “$scope” hierarchy is created.

The Browser first loads the above HTML page and creates a DOM (Document object model) and Angular runs over the DOM.Below are the steps how Angular creates the rootscope and scope objects.

Step 1:- Angular parser first encounters the “ng-app” directive and creates a “$rootScope” object in memory.
Step 2:- Angular parser moves ahead and finds the expression {{SomeValue}}. It creates a variable
Step 3:- Parser then finds the first “DIV” tag with “ng-controller” directive which is pointing to “Function1” controller. Looking at the “ng-controller” directive it creates a “$scope” object instance for “Function1” controller. This object it then attaches to “$rootScope” object.
Step 4:- Step 3 is then repeated by the parser every time it finds a “ng-controller” directive tag. Step 5 and Step 6 is the repetition of Step 3.

If you want to test the above fundamentals you can run the below sample Angular code. In the below sample code we have created controllers “Function1” and “Function2”. We have two counter variables one at the root scope level and other at the local controller level.

------------------------
index.html
---------------------------

<!DOCTYPE html>
<html lang="en-US">
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="app.js"></script>

<body ng-app="myApp" id=1>
   Global value is {{Counter}}<br />
<div ng-controller="Function1">
       Child Instance of {{ControllerName}} created :- {{Counter}}
</div><br />
<div ng-controller="Function2">
       Child Instance of {{ControllerName}} created :- {{Counter}}
</div><br />
<div ng-controller="Function1">
        Child Instance of {{ControllerName}} created :- {{Counter}}
</div><br />
<div ng-controller="Function2">
        Child Instance of {{ControllerName}} created :- {{Counter}}
</div><br />
</body>
</html>

-----------------------------
app.js
----------------------------------

var app = angular.module("myApp", []); // creating a APP

app.controller("Function1", function($scope, $rootScope){
    $rootScope.Counter = (($rootScope.Counter || 0) + 1);
    $scope.Counter = $rootScope.Counter;
});

app.controller("Function2", function($scope, $rootScope){
    $rootScope.Counter = (($rootScope.Counter || 0) + 1);
    $scope.Counter = $rootScope.Counter;
});

Here is output of this program :

Global value is 4

Child Instance of created :- 1

Child Instance of created :- 2

Child Instance of created :- 3

Child Instance of created :- 4

1 comment:

UnknownApril 25, 2018 at 11:14 PM
Hello Buddy,

Gratitude for putting up this prolific article! You truly make everything a cake walk. Genuinely good stuff, saving time and energy.

Is it possible to implement a server side feature that will export PivotGrid view to Excel/PDF/Word files based on the same datasource that angular control (ej-pivotgrid) is?
I mean this structure:
$scope.datasource = {
data: [],
values: [],
rows: [],
columns: []
};

If yes can you direct me in the right way?

But great job man, do keep posted with the new updates.

Merci Beaucoup,
ReplyDelete
Replies

Add comment