$rootScope and global state management

In AngularJS, $rootScope plays a crucial role in managing global data and events across the entire application. Since $rootScope is available in all controllers, it provides a way to share data between different components, making it useful for global state management.

This guide covers:

✔️ What $rootScope is
✔️ How to use $rootScope in AngularJS
✔️ Difference between $rootScope and $scope
✔️ Best practices for managing global state
✔️ Alternative approaches

---

1. What is $rootScope in AngularJS?

• $rootScope is the top-level scope in an AngularJS application.
• It is created when the AngularJS app starts and remains available throughout the app’s lifecycle.
• Any property attached to $rootScope becomes available in all controllers and views.

Syntax

app.run(function($rootScope) {
    $rootScope.globalVariable = "I am accessible everywhere!";
});

✔️ The run block initializes $rootScope when the app starts.
✔️ globalVariable can be accessed anywhere in the app.

---

2. Difference Between $rootScope and $scope

Feature	$rootScope	$scope
Scope Level	Global	Local (specific to a controller)
Accessibility	Available in all controllers & views	Only available in the assigned controller
Persistence	Exists throughout the app lifecycle	Destroyed when the controller is removed
Use Case	Global variables, events	Controller-specific data

---

3. Using $rootScope for Global Variables

Example: Sharing a global message

Controller 1 (HomeController)

app.controller("HomeController", function($scope, $rootScope) {
    $rootScope.globalMessage = "Welcome to AngularJS!";
});

Controller 2 (AboutController)

app.controller("AboutController", function($scope, $rootScope) {
    console.log($rootScope.globalMessage); // Accessible here too!
});

HTML View

<div ng-app="myApp" ng-controller="HomeController">
    <p>{{ globalMessage }}</p> <!-- Available everywhere -->
</div>

How it works?

• globalMessage is set in $rootScope inside HomeController.
• It can be accessed in AboutController without re-declaring it.

---

4. Using $rootScope for Event Handling

$rootScope helps controllers communicate using $broadcast, $emit, and $on.

4.1 $broadcast and $on (Parent to Child Communication)

Example: Broadcasting an event from $rootScope

app.controller("MainController", function($scope, $rootScope) {
    $scope.sendMessage = function() {
        $rootScope.$broadcast("eventName", { message: "Hello from MainController!" });
    };
});

Receiving the event in another controller

app.controller("ChildController", function($scope) {
    $scope.$on("eventName", function(event, data) {
        $scope.receivedMessage = data.message;
    });
});

HTML

<div ng-controller="MainController">
    <button ng-click="sendMessage()">Send Message</button>
</div>

<div ng-controller="ChildController">
    <p>Received: {{ receivedMessage }}</p>
</div>

How it works?

• MainController broadcasts an event using $rootScope.$broadcast().
• ChildController listens for the event using $on().
• When the event is triggered, receivedMessage updates.

---

4.2 $emit and $on (Child to Parent Communication)

Example: Emitting an event from a child controller

app.controller("ChildController", function($scope) {
    $scope.sendMessage = function() {
        $scope.$emit("eventName", { message: "Hello from ChildController!" });
    };
});

Listening for the event in $rootScope

app.run(function($rootScope) {
    $rootScope.$on("eventName", function(event, data) {
        console.log("Received in rootScope:", data.message);
    });
});

How it works?

• ChildController emits an event using $emit().
• $rootScope.$on() listens and logs the message.

---

5. Managing Global Authentication State

A common use case for $rootScope is managing user authentication.

Example: Storing user login state

Set login state in $rootScope

app.controller("LoginController", function($scope, $rootScope) {
    $scope.login = function() {
        $rootScope.isAuthenticated = true;
        $rootScope.username = "John Doe";
    };
});

Show login status in navbar

<div ng-controller="NavbarController">
    <p ng-show="isAuthenticated">Welcome, {{ username }}</p>
</div>

Why use $rootScope?

• isAuthenticated is accessible in the entire app.
• The navbar updates when the user logs in.

---

6. Best Practices for $rootScope

When to use $rootScope
✔️ Global settings (e.g., themes, language preferences).
✔️ Authentication state (e.g., login/logout).
✔️ Event broadcasting for inter-controller communication.

When to avoid $rootScope

• Avoid storing too much data in $rootScope (can cause performance issues).
• Prefer services for state management (e.g., $rootScope is hard to debug).
• Don’t use $rootScope for temporary data (use $scope instead).

---

7. Alternative Approach: Using Services for Global State

Instead of $rootScope, use a service for global state management.

Example: Creating an AuthService for authentication

app.factory("AuthService", function() {
    var user = { isAuthenticated: false, username: "" };

    return {
        login: function(name) {
            user.isAuthenticated = true;
            user.username = name;
        },
        logout: function() {
            user.isAuthenticated = false;
            user.username = "";
        },
        getUser: function() {
            return user;
        }
    };
});

Using AuthService in a Controller

app.controller("LoginController", function($scope, AuthService) {
    $scope.login = function() {
        AuthService.login("John Doe");
    };
});

Why use a service instead of $rootScope?
✔️ Encapsulates logic (better structure).
✔️ Easier to debug.
✔️ Can be reused across multiple controllers.