Course Progress 24%

AngularJS Scope

← AngularJS Controllers AngularJS Filters →

AngularJS Scope एक core concept है जो Controller और View (HTML) के बीच data और functions को connect करता है। Scope यह define करता है कि कौन सा data कहाँ available होगा और किस part of application में access किया जा सकता है।

Simple शब्दों में, $scope एक JavaScript object है जो AngularJS application का Model बनता है।

$scope क्या है

$scope एक object है जिसे AngularJS Controller को provide करता है। Controller में जो भी variables और functions $scope में attach किए जाते हैं, वे HTML View में automatically available हो जाते हैं।

Scope का मुख्य काम:

  • Data को store करना
  • Controller और View के बीच communication करना
  • Data Binding को possible बनाना

Basic $scope Example

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.message = "Hello Scope";
  });
</script>

Code Explanation

  • ng-app="myApp" AngularJS को बताता है कि कौन सा module use होगा
  • ng-controller="myCtrl" इस div के लिए controller activate करता है
  • Controller के अंदर $scope.message define किया गया है
  • {{message}} expression $scope.message की value को display करता है

यह example दिखाता है कि $scope के जरिए data Controller से View तक कैसे पहुँचता है।

Scope और Data Binding

Scope data binding का आधार होता है।

<div ng-app="myApp" ng-controller="nameCtrl">
  <input type="text" ng-model="name">
  <p>Your Name: {{name}}</p>
</div>

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

Code Explanation

  • $scope.name में initial value set की गई है
  • ng-model="name" input field को $scope.name से bind करता है
  • User input change करता है
  • Scope update होता है
  • View अपने आप update हो जाती है

यह Two-Way Data Binding का practical example है।

Scope Hierarchy

AngularJS में scopes hierarchical होते हैं। इसका मतलब है:

  • Parent scope
  • Child scope

Child scope parent scope की properties access कर सकता है।

<div ng-app="myApp" ng-controller="parentCtrl">
  <p>Parent: {{company}}</p>

  <div ng-controller="childCtrl">
    <p>Child: {{company}}</p>
  </div>
</div>

<script>
  var app = angular.module("myApp", []);

  app.controller("parentCtrl", function($scope) {
    $scope.company = "Tech Corp";
  });

  app.controller("childCtrl", function($scope) {
  });
</script>

Code Explanation

  • parentCtrl में $scope.company define किया गया है
  • childCtrl का scope parent scope का child है
  • Child scope parent scope की property company को access कर पा रहा है
  • इसलिए दोनों जगह same value display हो रही है

Child Scope Override Example

Child scope parent scope की value को override भी कर सकता है।

<div ng-app="myApp" ng-controller="parentCtrl">
  <p>Parent: {{name}}</p>

  <div ng-controller="childCtrl">
    <p>Child: {{name}}</p>
  </div>
</div>

<script>
  var app = angular.module("myApp", []);

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

  app.controller("childCtrl", function($scope) {
    $scope.name = "Child Name";
  });
</script>

Code Explanation

  • Parent controller में $scope.name set है
  • Child controller में same variable name दोबारा set किया गया
  • Child scope की value parent scope को affect नहीं करती
  • इसलिए parent और child दोनों का output अलग है

Scope और Functions

Scope सिर्फ data ही नहीं, functions भी hold कर सकता है।

<div ng-app="myApp" ng-controller="calcCtrl">
  <input type="number" ng-model="a">
  <input type="number" ng-model="b">
  <button ng-click="add()">Add</button>
  <p>Result: {{result}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("calcCtrl", function($scope) {
    $scope.add = function() {
      $scope.result = $scope.a + $scope.b;
    };
  });
</script>

Code Explanation

  • $scope.a और $scope.b input values store करते हैं
  • $scope.add() function button click पर execute होता है
  • Function calculation करके $scope.result set करता है
  • Result automatically View में display होता है

$rootScope क्या है

$rootScope पूरे AngularJS application का top-level scope होता है। इसके अंदर define किया गया data सभी controllers में available होता है।

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

Code Explanation

  • $rootScope.siteName global data बन जाता है
  • यह value हर controller और view में access की जा सकती है
  • $rootScope का limited use करना best practice माना जाता है

Scope Best Practices

  • $scope को simple रखें
  • Heavy logic services में रखें
  • $rootScope का overuse न करें
  • Clear parent-child scope structure रखें

Common Scope Mistakes

  • Scope hierarchy को समझे बिना variable override करना
  • $rootScope में unnecessary data रखना
  • Multiple controllers में same logic duplicate करना
  • Scope confusion के कारण unexpected output आना

Summary

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

  • AngularJS Scope क्या है
  • $scope और View के बीच relation
  • Scope hierarchy और inheritance
  • Child scope override behavior
  • Scope में functions का उपयोग
  • $rootScope का concept और use case
← AngularJS Controllers AngularJS Filters →
  • Home