How to use $rootScope Service In Angular

Q: How to use $rootScope Service In Angular

In this approach, we have directly used $rootScope to store the variable across multiple controllers. This approach uses the $rootScope service to create a shared variable (title) that is accessible over two controllers. Controller1 displays the initial title which is defined and stored using $rootScope and an approach description whereas Controller2 allows users to enter the input of a new value for the shared value. When the user clicks on the Update Title button dynamically the title is been changed using the $rootScope.title.

Steps to Configure the Angular Application

Using $rootScope with Service

In this approach, we have directly used $rootScope to store the variable across multiple controllers. This approach uses the $rootScope service to create a shared variable (title) that is accessible over two controllers. Controller1 displays the initial title which is defined and stored using $rootScope and an approach description whereas Controller2 allows users to enter the input of a new value for the shared value. When the user clicks on the Update Title button dynamically the title is been changed using the $rootScope.title.

Example: Below is an example demonstrating the use of $rootScope directly in AngularJS to store variables.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <title>Angular $rootScope Example</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> 
      </script> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            text-align: center; 
            margin: 50px; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        h3 { 
            color: blue; 
        } 
  
        input { 
            padding: 10px; 
            margin-top: 10px; 
        } 
  
        button { 
            padding: 8px; 
            margin-top: 10px; 
            background-color: #4CAF50; 
            color: white; 
            border: none; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body ng-controller="Controller1"> 
    <h1>{{ title }}</h1> 
    <h3>{{ approach }}</h3> 
    <div ng-controller="Controller2"> 
        <label for="sharedVariableInput"> 
              Enter Shared Variable: 
          </label> 
        <input type="text" 
               ng-model="sharedVariable"
               id="sharedVariableInput"
               placeholder="Enter text"> 
        <button ng-click="updateTitle()"> 
              Update Title 
          </button> 
    </div> 
    
    <script> 
        var app = angular.module('myApp', []); 
        app.run(function ($rootScope) { 
            $rootScope.title = 'w3wiki'; 
        }); 
        app.controller('Controller1', function ($scope, $rootScope) { 
            $scope.approach =  
              'Approach 1: Using $rootScope Directly'; 
        }); 
        app.controller('Controller2', function ($scope, $rootScope) { 
            $scope.updateTitle = function () { 
                $rootScope.title = $scope.sharedVariable; 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output:

How to use $rootScope to store variables in Angular ?

In Angular, the $rootScope is the service that is the top-level for all the controllers in the Angular application. This exists over the entire application lifecycle and can also be used to store the variables that need to be accessed globally. $rootScope is a singleton object that is across the entire application.

In this article, we will see the proper use of $rootScope in Angular to store variables. We have added the two examples that represent the use of storing variables using $rootScope in different perspectives.