forum

Home / DeveloperSection / Forums / Difference between $rootScope and $scope in AngularJS.

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

17-Jun-2024

$rootScope vs $scope

In AngularJS, both $rootScope and $scope are important components for managing data and interactions in applications. 

Here are some of the differences and how to use them,

$scope

Local Scope

$scope is a local object for every controller in AngularJS. When you define a controller in AngularJS, you can add $scope.

angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
   $scope.message = 'Hello, AngularJS!';
}]);

Scope Inheritance

$scope objects form a hierarchy that has a hierarchy based on DOM structure. Child controllers created in the scope of the parent controller inherit the parent's $scope. This property allows child managers to access properties and roles defined in parent scopes.

Controller-specific

Each controller has its own $scope, which means that any property or function defined in $scope is accessible only in the scope of that controller and its children.

 

$rootScope

Global Scope

 $rootScope is the parent of all $scope objects created in the AngularJS application. It is a global object that can be accessed anywhere in the application.

angular.module('myApp', [])
.run(['$rootScope', function($rootScope) {
   $rootScope.appName = 'My AngularJS Application';
}]);

Event Communication 

$rootScope is useful for creating events and listening for events across scopes. It provides a means of communication between different controllers or components connected directly through scope descendants.

Careful Usage

Although $rootScope is powerful, it should be used sparingly to avoid polluting the global namespace and causing potential conflicts or performance issues

Example-

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>ng-Root Scope</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div>
        <!-- rootScope value {{color}} = green -->
        <p>Root Scope color is:</p>
        <h3>{{color}}</h3>
        <!-- Within the controller, Scope value of {{color}} = yellow -->
        <div data-ng-controller="myController">
            <p>Scope color is :</p>
            <h3>{{color}}</h3>
        </div>
        <!-- again out of controller scope {{color}} = green  -->
        <p>Root Scope color again is :</p>
        <h3>{{color}}</h3>
    </div>

    <script>
        var app=  angular.module("myApp", []);
        app.run(function($rootScope){
            $rootScope.color = "green";
        })
        .controller("myController", ['$scope', function($scope){
            $scope.color = "yellow";
        }]);

    </script>

</body>
</html>

Output- 

Root Scope color is:
green
Scope color is :
yellow
Root Scope color again is :
green

 

Also, Read: How to use the $http service in my AngularJS?

MindStick Training

Liked By