AngularJS Scopes

📌 AngularJS Scope क्या है?

AngularJS में $scope एक object होता है जो Controller और View (HTML) के बीच data को connect करता है।

आसान भाषा में: $scope वो bridge है जो Controller में रखा data, HTML (View) तक पहुँचाता है।

🎯 स्कोप का काम क्या है?

Controller में बने variables को View में उपलब्ध कराना
View में होने वाले बदलावों को Controller तक पहुँचाना
Two-way data binding को possible बनाना
AngularJS expressions और bindings को काम में लाना

✍️ Basic Syntax:

app.controller("myCtrl", function($scope) {
  $scope.name = "Amit";
});

<p>{{ name }}</p>

यहाँ name का data $scope के ज़रिए Controller से HTML तक पहुंच रहा है।

🧪 Example: Scope in Action

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.firstName = "Rahul";
      $scope.lastName = "Sharma";
    });
  </script>
</head>
<body ng-controller="myCtrl">

<h3>Full Name: {{ firstName + " " + lastName }}</h3>

</body>
</html>

Output: Full Name: Rahul Sharma

🧱 Scope Hierarchy (Hierarchy of Scopes)

AngularJS में scopes hierarchical (layer-wise) होते हैं — यानी parent-child structure में।

Root Scope
 ├── Controller 1 Scope
 ├── Controller 2 Scope
      └── Child Controller Scope

मतलब: एक Controller का scope सिर्फ उसी controller के अंदर valid होता है।

🔄 Example: Nested Scopes

<div ng-app="myApp" ng-controller="parentCtrl">
  Parent Name: {{ name }}
  
  <div ng-controller="childCtrl">
    <br>Child Name: {{ name }}
  </div>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("parentCtrl", function($scope) {
  $scope.name = "Parent";
});
app.controller("childCtrl", function($scope) {
  $scope.name = "Child";
});
</script>

✅ Output:

Parent Name: Parent
Child Name: Child

Child controller अपने अलग $scope में काम करता है।

📦 Scope Object में क्या-क्या हो सकता है?

Strings ($scope.name = "Amit")
Numbers ($scope.age = 25)
Arrays ($scope.items = [1,2,3])
Objects ($scope.student = {name: "Anu", marks: 88})
Functions ($scope.greet = function() { ... })

💡 Best Practices:

✅ $scope का इस्तेमाल सिर्फ data और logic के लिए करें
❌ DOM manipulation (document.getElementById) ना करें
✅ हर controller का अलग $scope रखना सही होता है
✅ Reusable data को एक common parent scope में रखें

🧠 अभ्यास प्रश्न (Exercise)

AngularJS में $scope का क्या role है?
क्या दो controllers एक ही $scope share करते हैं?
नीचे दिए गए कोड का output बताइए:

$scope.a = 5;
$scope.b = 10;
$scope.sum = function() {
  return $scope.a + $scope.b;
};

<p>{{ sum() }}</p>

✅ आपने क्या सीखा?

AngularJS $scope क्या होता है
कैसे Controller और View को जोड़ता है
Nested scopes और उनका व्यवहार
Scope object में क्या-क्या हो सकता है
Practice questions

🎯 अब आप AngularJS की binding logic और structure को गहराई से समझ चुके हैं!

← Previous Next →

Angular JS Tutorial