انگولار جی اسکوپ
- پچھلے پیج انگولار جی کنٹرولر
- پائیدھ کا پیج انگولار جی فیلٹر
ਸਕੋਪ (scope) ਹੈ ਐੱਚਟੀਐੱਮਐੱਲ (ਦਰਸ਼ਨ) ਅਤੇ ਜਾਵਸਕ੍ਰਿਪਟ (ਕੰਟਰੋਲਰ) ਦਰਮਿਆਨ ਬੰਧਾਉਣ ਵਾਲਾ ਹਿੱਸਾ。
ਸਕੋਪ ਹੈ ਇੱਕ ਅਜਿਹਾ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਣਾਈਆਂ ਗਈਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਮੰਥਨਾਂ ਵਾਲਾ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਣਾਈਆਂ ਗਈਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ।
ਸਕੋਪ ਦਰਸ਼ਨ ਅਤੇ ਕੰਟਰੋਲਰ ਲਈ ਉਪਲੱਬਧ ਹੈ。
ਕਿਵੇਂ ਸਕੋਪ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ?
ਤੁਸੀਂ ਜਦੋਂ ਐਂਜੁਲਰਜੀਐੱਸ ਵਿੱਚ ਕੰਟਰੋਲਰ ਬਣਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ: $scope ਪਰਾਮੀਤਰ ਵਜੋਂ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਣਾਈਆਂ ਗਈਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:
مثال
ਕੰਟਰੋਲਰ ਵਿੱਚ ਬਣਾਈਆਂ ਗਈਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਦਰਸ਼ਨ ਵਿੱਚ ਰੂਪ ਲੈਣਾ ਸਮਝਦੇ ਹਨ:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
کنٹرولر میں $scope جب آپ کچھ جائزے کا استعمال کریگا تو ویج (ایچ تی ایم) ان جائزوں تک رسائی حاصل کریگا。
ویج میں آپ کچھ جائزے کا استعمال نہیں کریگا، $scope پیشوند، آپ صرف ایک جائزہ کا نام کا استعمال کریگا، مثال میں: {{carname}}。
دوران سمجھنا
اگر آئی این جی جی اپلی کیشن کو یہ بندوبست میں دیکھتا ہوئے آپ کو آئی این جی جی کا استعمال کریگا:
- ویج، جو ایچ تی ایم ہوتا ہے。
- ماڈل، جو موجودہ ویج کا استعمال کریگا کا دیتا ہے。
- کنٹرولر، جو جائزے کا ایک فنکشن ہے، جس کا استعمال کریگا تاکہ دیتا، بدل، حذف یا کنٹرول کریگا۔
جب تو دوران ماڈل کا مقصد آتا ہے。
دوران ایک جائزہ اور متدواری جائزے کا ایک جائزہ ہے، جس کی جائزے اور کنٹرولر کا استعمال کریگا。
مثال
اگر آپ نے ویج کا لئے تبدیلی کی تو ماڈل اور کنٹرولر اپدیت ہوجائیں گے:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>میری نام بیل گیتس ہے</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Bill Gates";
});
</script>
آپ کا دوران سمجھنا
کسی بھی وقت آپ کا دوران سمجھنا بہت اہم ہوتا ہے。
مذکورہ دو مثال میں صرف ایک دوران موجود ہوتا ہے، لہذا آپ کا دوران سمجھنا مشکل نہیں ہوتا، لیکن بڑے ایپلی کیشن کے لئے HTML ڈی او ایم میں کچھ حصوں کو صرف کچھ دوران تک رسائی حاصل ہوتی ہے。
مثال
آئی این جی نکاچا کا ng-repeat کا استعمال کریگا کے دوران، هر بار تکرار کے دوران موجودہ تکرار کا آئی این جی نکاچا کا استعمال کریگا:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="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 عناصر پر قائم کردہ دوران。
رووت اسکوپ پورے ایپلی کیشن میں دستیاب ہوتا ہے。
اگر کسی متغیر کا نام موجود ہے جو موجودہ دوران اور رووت اسکوپ میں ایک سے زیادہ ہو تو ایپلی کیشن موجودہ دوران میں موجود متغیر کا استعمال کریگا。
مثال
کنٹرولر کا دوران و رووت اسکوپ میں دونوں میں ایک نام "رنگ" والی متغیر موجود ہے:
<body ng-app="myApp">
<p>rootscope کا فویٹی رنگ:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>کنٹرولر کا پسندیدہ رنگ کا اسکوپ:</p>
<h1>{{color}}</h1>
</div>
<p>rootScope کا پسندیدہ رنگ اب بھی:</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>
- پچھلے پیج انگولار جی کنٹرولر
- پائیدھ کا پیج انگولار جی فیلٹر
