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 the redColor property with the $scope object.

Code

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

In addition to the $scope object, I am injecting the $rootscope object and setting the root scope color property as shown below.

.controller("redColourController", function ($scope, $rootScope) {
    $scope.redColour = "Red Colour";
    $rootScope.rootScopeColour = "Root Scope Colour";
})

So, our final sciprt.js file code is.

/// <reference path="angular.min.js" />
var app = angular.module("Demo", [])
    .controller("redColourController", function ($scope, $rootScope) {
        $scope.redColour = "Red Colour";
        $rootScope.rootScopeColour = "Root Scope Colour";
    })
    .controller("greenColourController", function ($scope) {
        $scope.greenColour = "Green Colour";
    });

Now, include an HTML file in your application. I want redColourController to take 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,

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/script.js"></script>
</head>
<body>
    <div ng-controller="redColourController">
        Red Scope Colour:
        Red Colour Controller:
        Green Colour Controller:
    </div>
</body>
</html>

Now, copy the property value that we want to display and use a binding expression.

<div ng-controller="redColourController">
    Red Scope Colour: {{rootScopeColour}}
    Red Colour Controller: {{redColour}}
    Green Colour Controller: {{greenColour}}
</div>

Now, insert the same DIV code and make the greenColourController in charge to display the green color property value as well.

<div ng-controller="greenColourController">
    Red Scope Colour: {{rootScopeColour}} <br />
    Green Colour Controller: {{greenColour}} <br />
    Red Colour Controller: {{redColour}}
</div>

Save the changes and run your project.

Output

$rootscope color properties are available in both the div elements because that is defined in the $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 the $scope object, that property will not be available for the 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.

<span style="color:red" ng-show="greenColour == undefined">
    greenColour is undefined
</span>

Here, we have taken the span element for displaying the color as red. We will use the ng-show directive to display and will write one condition- If the green color is undefined and that condition is true, it will display the green color as undefined.

Similarly, we will do it for another div element too.

<span style="color:green" ng-show="redColour == undefined">
    redColour is undefined
</span>

So, our final View code is.

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/script.js"></script>
</head>
<body>
    <div ng-controller="redColourController">
        Red Scope Colour: {{rootScopeColour}} <br/>
        Red Colour Controller: {{redColour}} <br/>
        Green Colour Controller: 
        <span style="color:red" ng-show="greenColour == undefined">
            greenColour is undefined
        </span>
    </div>
    <br/>
    <div ng-controller="greenColourController">
        Red Scope Colour: {{rootScopeColour}} <br/>
        Green Colour Controller: {{greenColour}} <br/>
        Red Colour Controller: 
        <span style="color:green" ng-show="redColour == undefined">
            redColour is undefined
        </span>
    </div>
</body>
</html>

Now, let’s save these changes and reload the page.

Reload

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