اگلر جی ایس اسکوپ
- پچھلے پیج پر جائیں اگلر جی ایس کنٹرولر
- پچھلے پیج پر جائیں اگلر جی ایس فیلٹر
اسکوپ (scope) HTML (ویجیات) اور JavaScript (کنٹرولر) کے درمیان کی جوڑی نکالتی ہے۔
اسکوپ وسیع طور پر دستیاب خاصیتوں اور طویل کار کا ایک آبجیکٹ ہوتا ہے。
اسکوپ ویجیات اور کنٹرولر دونوں کے لئے دستیاب ہوتا ہے。
کیسے اسکوپ استعمال کریں؟
جب آپ AngularJS میں کنٹرولر بناتے ہیں تو آپ $scope آبجیکٹ کے طور پر پارامٹر کی جانچ:
مثال
کنترولر میں بنائی گئی خصوصیات، ویجیات میں رجوع کی جاسکتی ہیں:
<div آئی اینگ-آپ="myApp" آئی اینگ-کنٹرولر="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
جب کنٹرولر میں آپ کچھ کیا جاتا ہے، $scope آپ کا آٹھ میٹک آفجکٹ اپنے اپنے اعداد و شمار کا استعمال کرسکتا ہے، جو ویج (ایچ تی ایم) کے ذریعے دستیاب ہوتا ہے۔
ویج میں، آپ آئی اینگ-مدل کا استعمال نہیں کرتے، $scope پیش کس میں، آپ صرف ایک اپنے نام کا استعمال کریں گے، جیسے {{carname}}。
دائرہ اثر سمجھیں
اگر ہم انگولار جی ایس پروگرام کو اس طرح دیکھیں کہ یہ آئندہ چند حصوں سے مل کر بنایا گیا ہے:
- ویج، یعنی ایچ تی ایم۔
- ماڈل، یعنی موجودہ ویج کے لئے دستیاب اعداد و شمار۔
- کنٹرولر، یعنی جاوا اسکریپٹ فنکشن، جو اعداد و شمار کی تیاری/تغییر/حذف/کنٹرول کا کام کرتا ہے۔
تو دائرہ اثر ماڈل ہوتا ہے۔
دائرہ اثر ایک جس میں اپنے اور طویل سمتواری موجود ہیں، جو ویج اور کنٹرولر دونوں کے لئے دستیاب ہیں، یہ ایک جاوا اسکریپٹ آٹھ میٹک آفجکٹ ہوتا ہے。
مثال
اگر آپ نے ویج میں کوئی تبدیلی کی تو، ماڈل اور کنٹرولر اپدیت ہو جائیں گے:
<div آئی اینگ-آپ="myApp" آئی اینگ-کنٹرولر="myCtrl">
<input آئی اینگ-مدل="name">
<h1>میرا نام {{name}} ہے</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Bill Gates";
});
</script>
آپ کا دائرہ اثر سمجھیں
آپ کو کسی وقت بھی آپ کا دائرہ اثر سمجھنا اہم ہوتا ہے。
علیکم ملاحظہ کریں کہ بالا دو مثال میں صرف ایک دائرہ اثر موجود ہے، لہذا آپ کا دائرہ اثر سمجھنا مسئلہ نہیں ہے، لیکن بڑے پروگراموں کے لئے، HTML ڈی او ایم میں کچھ حصوں کو صرف کچھ دائرے اثرات کے ذریعے دستیاب کر سکتے ہیں。
مثال
آئی اینگ-ریپیٹ کی کمان کا معاملہ کی مدد سے، ہر بار تکرار کے دوران موجودہ تکرار والی اشیاء کو دستیاب کر سکتے ہیں:
<div آئی اینگ-آپ="myApp" آئی اینگ-کنٹرولر="myCtrl">
<ul>
<li آئی اینگ-ریپیٹ="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
ہر <li> عناصر موجودہ تکرار والی اشیاء کو بھی دستیاب کر سکتے ہیں، اس مثال میں یہ ایک سطر ہے، اس کا استعمال x استعمال کیا جاتا ہے۔
ریشه دائرہ
تمام پروگراموں کا $rootScope، جو آئی اینگ-آپ آئی اینگ (HTML) عناصر پر قائم کردہ دائرہ اثر。
rootScope پورے پروگرام میں دستیاب ہوتا ہے。
اگر کسی متغیر کا نام موجودہ دائرہ اثر اور ریشه دائرہ (rootScope) میں ایک سے زیادہ ہے تو، پروگرام دونوں میں موجودہ دائرہ اثر کی متغیر استعمال کرے گا。
مثال
کنٹرولر کا دائرہ اثر اور rootScope میں دونوں میں ایک نام "رنگ" والی متغیر موجود ہے:
<body ng-app="myApp">
<p>ورووسپکت کا پسندیدہ رنگ:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>کنٹرولر کے اسکوپ کا پسندیدہ رنگ:</p>
<h1>{{color}}</h1>
</div>
<p>روٹ اسکوپ کا پسندیدہ رنگ اب بھی:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>
- پچھلے پیج پر جائیں اگلر جی ایس کنٹرولر
- پچھلے پیج پر جائیں اگلر جی ایس فیلٹر
