AngularJS $scope vs $rootScope

AngularJS में $scope और $rootScope data sharing और application state manage करने के लिए core concepts हैं। इन दोनों को सही तरह से समझना बहुत जरूरी है, क्योंकि गलत use से performance issues और unexpected bugs आ सकते हैं।

इस chapter में आप समझेंगे:

• $scope क्या है
• $rootScope क्या है
• दोनों में difference
• Scope hierarchy कैसे काम करती है
• Best practices और common mistakes

$scope क्या है

$scope एक JavaScript object है जो:

• Controller और View के बीच data share करता है
• Expressions और bindings को hold करता है
• Application के UI state को manage करता है

हर controller का अपना $scope होता है।

app.controller("ctrl1", function($scope) {
  $scope.name = "AngularJS";
});

Explanation

• $scope.name view में accessible होता है
• यह scope सिर्फ उसी controller तक limited रहता है

$rootScope क्या है

$rootScope AngularJS application का top-level scope होता है।

• यह पूरे application में shared होता है
• सभी $scope objects $rootScope से inherit करते हैं
• Global data store करने के लिए use किया जाता है

app.run(function($rootScope) {
  $rootScope.appName = "My App";
});

Explanation

• $rootScope.appName हर controller में accessible होता है
• Application start होते ही initialize होता है

Scope Hierarchy

AngularJS में scope tree structure follow होती है।

$rootScope
   |
   |-- $scope (Controller A)
         |
         |-- $scope (Child Controller)

Explanation

• Child scope parent scope से data inherit करता है
• Changes local scope में पहले search होती हैं

$scope vs $rootScope – Key Differences

Feature	$scope	$rootScope
Scope Level	Controller-level	Application-level
Lifetime	Controller तक	Application lifetime
Accessibility	Limited	Global
Best Use	Local data	Global data
Risk	Low	High (overuse)

Example: $scope vs $rootScope

app.controller("ctrlA", function($scope, $rootScope) {
  $scope.local = "Local Data";
  $rootScope.global = "Global Data";
});

app.controller("ctrlB", function($scope) {
});

<div ng-controller="ctrlA">
  {{local}} - {{global}}
</div>

<div ng-controller="ctrlB">
  {{local}} - {{global}}
</div>

Code Explanation

• local सिर्फ ctrlA में available है
• global ctrlA और ctrlB दोनों में accessible है

Scope Inheritance Example

app.controller("parentCtrl", function($scope) {
  $scope.title = "Parent Title";
});

app.controller("childCtrl", function($scope) {
});

<div ng-controller="parentCtrl">
  {{title}}
  <div ng-controller="childCtrl">
    {{title}}
  </div>
</div>

Explanation

• Child controller parent का $scope inherit करता है
• Parent data child में read हो सकता है

Shadowing Problem

app.controller("childCtrl", function($scope) {
  $scope.title = "Child Title";
});

Explanation

• Child scope parent variable override कर देता है
• Parent value change नहीं होती
• इसे scope shadowing कहते हैं

$rootScope Events

$rootScope events broadcast और listen करने के लिए use होता है।

$rootScope.$broadcast("eventName");

$scope.$on("eventName", function() {
});

Explanation

• Application-wide communication possible होती है
• But excessive use avoid करना चाहिए

When to Use $rootScope

Use करें जब:

• Application-level config data हो
• User login status global हो
• Theme या language global हो

Avoid करें जब:

• Component-specific data हो
• Temporary UI state हो

Best Practices

• $rootScope minimal use करें
• Local data $scope में रखें
• Shared logic services में रखें
• Events limited रखें

Common Mistakes

• हर data $rootScope में डाल देना
• $rootScope को data store बना देना
• Scope hierarchy ignore करना
• Memory leaks create करना

Summary

इस chapter में आपने सीखा:

• $scope और $rootScope क्या हैं
• Scope hierarchy कैसे काम करती है
• दोनों के बीच differences
• Inheritance और shadowing
• Best practices और common mistakes