AngularJS နယ်ပယ်
နယ်ပယ်သည် HTML (မြင်ကွင်း) နှင့် JavaScript (ထိန်းချုပ်သူ) အကြား ချိတ်ဆက်မှုအပိုင်းဖြစ်သည်။
နယ်ပယ်သည် ရရှိနိုင်သော ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများပါရှိသော အရာဝတ္ထုတစ်ခုဖြစ်သည်။
မြင်ကွင်းနှင့် ထိန်းချုပ်ကိရိယာ နှစ်ခုစလုံးအတွက် နယ်ပယ်ကို ရနိုင်သည်။
Scope ကို ဘယ်လိုသုံးမလဲ။
AngularJS တွင် controller တစ်ခုပြုလုပ်သောအခါ၊ သင်သည် $scopeargument အဖြစ် အရာဝတ္ထုကို ကျော်သွားသည် ။
ဥပမာ
Controller တွင် ပြုလုပ်ထားသော Properties ကို မြင်ကွင်းတွင် ရည်ညွှန်းနိုင်သည်-
<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
ထိန်းချုပ်ကိရိယာရှိ အရာဝတ္တု သို့ ဂုဏ်သတ္တိများ ထည့်သောအခါ ၊ မြင်ကွင်း (HTML) သည် ဤဂုဏ်သတ္တိများကို ဝင်ရောက်ခွင့် ရရှိသည်။
မြင်ကွင်းတွင်၊ သင်သည် ရှေ့ဆက်ကို မသုံးပါ $scope၊ သင်သည် ပိုင်ဆိုင်မှုအမည်ကဲ့သို့သော ပိုင်ဆိုင်မှုအမည်တစ်ခုကိုသာ ရည်ညွှန်းခြင်းဖြစ်သည် {{carname}}။
Scope ကို နားလည်ခြင်း။
AngularJS အက်ပလီကေးရှင်းကို ထည့်သွင်းစဉ်းစားပါက၊
- HTML ဟူသည်မှာ View ဖြစ်သည်။
- လက်ရှိကြည့်ရှုမှုအတွက် ရရှိနိုင်သောဒေတာဖြစ်သည့် မော်ဒယ်။
- Controller သည် ဒေတာကို ပြုလုပ်/ပြောင်းလဲ/ဖယ်ရှား/ထိန်းချုပ်ပေးသည့် JavaScript လုပ်ဆောင်ချက်ဖြစ်သည်။
ပြီးရင် scope က Model ပါ။
နယ်ပယ်သည် view နှင့် controller နှစ်ခုလုံးအတွက် ရနိုင်သော ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများပါရှိသော JavaScript object တစ်ခုဖြစ်သည်။
ဥပမာ
မြင်ကွင်းတွင် အပြောင်းအလဲများ ပြုလုပ်ပါက၊ မော်ဒယ်နှင့် ထိန်းချုပ်ကိရိယာကို အပ်ဒိတ်လုပ်မည်-
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
သင်၏နယ်ပယ်ကိုသိပါ။
မည်သည့် အတိုင်းအတာကို အချိန်မရွေး ကိုင်တွယ်ဆောင်ရွက်နေသည်ကို သိရှိရန် အရေးကြီးပါသည်။
အထက်ဖော်ပြပါ ဥပမာနှစ်ခုတွင် နယ်ပယ်တစ်ခုတည်းသာရှိသည်၊ ထို့ကြောင့် သင်၏နယ်ပယ်ကိုသိရှိခြင်းသည် ပြဿနာမဟုတ်သော်လည်း ကြီးမားသောအပလီကေးရှင်းများအတွက် HTML DOM တွင် ကဏ္ဍအချို့ရှိနိုင်သော်လည်း အချို့သောနယ်ပယ်များကိုသာ ဝင်ရောက်နိုင်သည်။
ဥပမာ
ညွှန်ကြားချက် ကို ကိုင်တွယ်ဖြေရှင်းသောအခါ 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။
Root Scope
အပလီကေးရှင်းအားလုံးတွင် ညွှန်ကြားချက် $rootScopeပါရှိသော HTML ဒြပ်စင်ပေါ်တွင် ဖန်တီးထားသော နယ်ပယ်တစ်ခုရှိသည် ။ng-app
rootScope ကို အပလီကေးရှင်းတစ်ခုလုံးတွင် ရနိုင်ပါသည်။
ကိန်းရှင်တစ်ခုသည် လက်ရှိနယ်ပယ်နှင့် rootScope နှစ်ခုလုံးတွင် အမည်တူပါက၊ အပလီကေးရှင်းသည် လက်ရှိနယ်ပယ်ရှိ တစ်ခုကို အသုံးပြုသည်။
ဥပမာ
"အရောင်" ဟု အမည်ပေးထားသည့် ပြောင်းလဲမှုတစ်ခုသည် controller ၏ နယ်ပယ်နှင့် rootScope နှစ်ခုလုံးတွင် ရှိနေသည်-
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</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>