Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Difference between $rootScope and $scope in AngularJS. – MindStick
Ask Question

1 Answers

Ashutosh Patel
Ashutosh Patel 17 Jun 2024
Report Abuse

$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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md