In AngularJS, $scope and $rootScope are both used for data binding and event handling within an application. However, they differ in their scope, lifecycle, and usage.
1. What is $scope?
$scope is an object that binds data and functions to an AngularJS controller. It acts as the execution context for expressions inside the view (HTML).
Characteristics of $scope
Created for each controller separately.
Exists only within the controller it is defined in.
When the controller is destroyed, $scope is also destroyed.
$scope properties and functions are accessible only within the controller and its child components.
Example of $scope Usage
angular.module('myApp', [])
.controller('MainController', function($scope) {
$scope.message = "Hello from MainController!";
});
Here, $scope.message is accessible only inside MainController.
2. What is $rootScope?
$rootScope is the top-level scope in AngularJS and is available globally throughout the application.
Characteristics of $rootScope
Available globally in the entire app.
It is created once when the application starts and persists throughout.
Useful for global state management.
All child scopes inherit from $rootScope.
Example of $rootScope Usage
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.globalMessage = "Hello from $rootScope!";
})
.controller('MainController', function($scope, $rootScope) {
console.log($rootScope.globalMessage); // Accessible here
});
$rootScope.globalMessage is available in all controllers.
3. Key Differences Between $scope and $rootScope
| Feature | $scope | $rootScope |
|---|---|---|
| Scope | Local (Controller-specific) | Global (Available across the app) |
| Lifetime | Created and destroyed with its controller | Created once when the app starts and exists until the app is closed |
| Hierarchy | Child of $rootScope | Parent of all $scope instances |
| Use Case | Controller-specific data and operations | Global variables and event handling across controllers |
| Inheritance | Does not inherit properties from other $scope instances | Properties are inherited by all $scope instances |
4. $scope vs $rootScope in Event Handling
$scope.$broadcast() (Broadcast to Child Scopes)
$scope.$broadcast('customEvent', 'Message to child scopes');
Sends an event downward to child controllers.
$scope.$emit() (Emit to Parent Scopes)
$scope.$emit('customEvent', 'Message to parent scope');
Sends an event upward to parent scopes.
$rootScope.$broadcast() (Broadcast to All Scopes)
$rootScope.$broadcast('customEvent', 'Message to all controllers');
Sends an event globally across all controllers.
5. When to Use $scope and $rootScope
Use $scope when:
- You need controller-specific data.
- The data is temporary and does not need to persist across controllers.
Use $rootScope when:
- You need global data (e.g., user authentication state).
- You need to communicate between multiple controllers.
- You want to trigger global events.
Avoid excessive use of $rootScope, as it can cause performance issues and make debugging difficult.