Post
Ask Question

Difference Between $scope And $rootscope In AngularJS

Overview

In this article, we will see how $scope is different from $rootscope, with an example.

For more articles on AngularJS, please refer to the links, given below. Introduction

$rootscope is available globally (for all Controllers), whereas $scope is available only to the Controller that has created it. Don’t get confused by this statement. We will see this with an example.

Now, create an empty website in which you create a script.js file and reference your Angular script file. 
 
In our script.js file, we have written a function and attached redColour property with $scope object.

code

This redColourController is setting red color on $scope object and the same is happening with greenColourController as well.

In addition to $scope object, I am injecting $rootscope object and setting rootscope color property as shown below:
  1. .controller("redColourController", function ($scope, $rootScope) {  
  2. $scope.redColour = "Red Colour";  
  3. $rootScope.rootScopeColour = " Root Scope Colour";  
  4. })  
So, our final sciprt.js file code is.
  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("Demo", [])  
  3.                    .controller("redColourController", function ($scope, $rootScope) {  
  4.                        $scope.redColour = "Red Colour";  
  5.                        $rootScope.rootScopeColour = "Root Scope Colour";  
  6.                    })  
  7.                       .controller("greenColourController", function ($scope) {  
  8.                           $scope.greenColour = "Green Colour";  
  9.                       })  
Now, include an HTML file in your application. I want redColourController to take the charge of displaying the scope color. In order to do that, we will take a DIV element inside the body section and in that, we will write as ng-controller and the redColourController name. We will display each property value.

So far, our HTML Code is,
  1. <!DOCTYPE html>  
  2. <html ng-app="Demo">  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="scripts/angular.min.js"></script>  
  7.     <script src="scripts/script.js"></script>  
  8. </head>  
  9. <body>  
  10. <div ng-controller="redColourController">  
  11.   
  12.     Red Scope Colour :  
  13.     Red Colour Controller :  
  14.     Green Colour Controller :  
  15. </div>  
  16. </body>  
  17. </html>  
Now, copy the property value which we want to display and use a binding expression .
  1. <div ng-controller="redColourController">  
  2.   
  3.     Red Scope Colour : {{rootScopeColour}}  
  4.     Red Colour Controller : {{redColour}}  
  5.     Green Colour Controller : {{greenColour}}  
  6. </div>  
Now, insert the same DIV code and make the greenColourController in charge to display the green color property value as well.
  1. <div ng-controller="greenColourController">  
  2.   
  3.        Red Scope Colour : {{rootScopeColour}} <br />  
  4.        Grren Colour Controller : {{greenColour}} <br />  
  5.        Red Colour Controller : {{redColour}}  
  6.    </div>  
Save the changes and run your project.

output

$rootscope color properties are available in both the div elements because that is defined in $scope object.

Red Color Controller : {{redColour}} will be available for the red color controller and that’s why we see the output as Red Color,

But when you see the green color property which is defined on $scope object, that property will not be available for red color controller, that’s why in the output we don’t see any value for the green color controller and the same scenario for the other div and the other red color controller.

Now, as there are no respective values for the various green and red color controllers, they appear to be blank. We will write green and red as undefined.
  1. <span style="color:red" ng-show="greenColour == undefined">  
  2.                                   greenColour is undefined  
  3.     </span>  
Here, we have taken span element for displaying color as red. We will use ng-show directive to display and will write one condition- If the green color is undefined and that condition is true, it will display greencolor as undefined .

Similarly, we will do it for other div element too.
  1. <span style="color:green" ng-show="redColour == undefined">  
  2.     redColour is undefined  
  3. </span>  
So, our final View code is.
  1. <!DOCTYPE html>  
  2. <html ng-app="Demo">  
  3. <head>  
  4.     <title></title>  
  5.   
  6.     <script src="scripts/angular.min.js"></script>  
  7.      
  8.     <script src="scripts/script.js"></script>  
  9. </head>  
  10. <body>  
  11. <div ng-controller="redColourController">  
  12.   
  13.     Red Scope Colour : {{rootScopeColour}} <br/>  
  14.     Red Colour Controller : {{redColour}} <br />  
  15.     Green Colour Controller : <span style="color:red" ng-show="greenColour == undefined">  
  16.                                   greenColour is undefined  
  17.     </span>  
  18. </div>  
  19.     <br/>  
  20.   
  21.     <div ng-controller="greenColourController">  
  22.   
  23.         Red Scope Colour : {{rootScopeColour}} <br />  
  24.         Grren Colour Controller : {{greenColour}} <br />  
  25.         Red Colour Controller : <span style="color:green" ng-show="redColour == undefined">  
  26.     redColour is undefined  
  27. </span>  
  28.     </div>  
  29. </body>  
  30. </html>  
Now, let’s save these changes and reload the page.

output

As you can see, we got the value for the green and red color Controller.

Conclusion

This was all about the main difference between $scope and $rootscope object. Hope this article was helpful!!


Similar Articles