AngularJS ထိန်းချုပ်ကိရိယာများ
AngularJS ထိန်းချုပ်သူများသည် AngularJS အပလီကေးရှင်း များ၏ဒေတာ ကိုထိန်းချုပ်သည်။
AngularJS ထိန်းချုပ်သူများသည် ပုံမှန် JavaScript Objects များ ဖြစ်သည်။
AngularJS ထိန်းချုပ်ကိရိယာများ
AngularJS အပလီကေးရှင်းများကို ထိန်းချုပ်ကိရိယာများဖြင့် ထိန်းချုပ်ထားသည်။
ng-controller ညွှန်ကြားချက် သည် application controller ကို သတ်မှတ်သည်။
Controller သည် စံ JavaScript object constructor မှ ဖန်တီးထားသော JavaScript Object ဖြစ်သည်။
AngularJS ဥပမာ
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.firstName
= "John";
$scope.lastName = "Doe";
});
</script>
လျှောက်လွှာကိုရှင်းပြခဲ့သည်
AngularJS အပလီကေးရှင်းကို ng-app="myApp" က သတ်မှတ်သည် ။ အပလီကေးရှင်းသည် <div> အတွင်းတွင် အလုပ်လုပ်သည်။
ng-controller= " myCtrl" ရည်ညွှန်းချက်သည် AngularJS ညွှန်ကြားချက်တစ်ခုဖြစ်သည်။ ၎င်းသည် controller ကိုသတ်မှတ်သည်။
myCtrl လုပ်ဆောင်ချက် သည် JavaScript လုပ်ဆောင်ချက်ဖြစ်သည်။
AngularJS သည် $scope object တစ်ခုဖြင့် controller ကိုခေါ်ပါမည်။
AngularJS တွင်၊ $scope သည် အပလီကေးရှင်းအရာဝတ္တု (အပလီကေးရှင်းကိန်းရှင်များနှင့် လုပ်ဆောင်ချက်များ၏ ပိုင်ရှင်) ဖြစ်သည်။
ထိန်းချုပ်သူသည် နယ်ပယ် ( ပထမအမည် နှင့် နောက်ဆုံးအမည် ) တွင် ဂုဏ်သတ္တိများ (variable) နှစ်ခုကို ဖန်တီးသည် ။
ng-model လမ်းညွှန်ချက်များ သည် input အကွက်များကို controller ဂုဏ်သတ္တိများ (firstName နှင့် lastName) နှင့် ချိတ်ဆက်သည်။
ထိန်းချုပ်ရေးနည်းလမ်းများ
အထက်ဖော်ပြပါ ဥပမာတွင် ဂုဏ်သတ္တိ နှစ်ခုပါရှိသော ထိန်းချုပ်သူ အရာဝတ္တုအား နောက်ဆုံးအမည် နှင့် ပထမအမည် သရုပ်ပြခဲ့သည်။
ထိန်းချုပ်ကိရိယာတွင် နည်းလမ်းများ (လုပ်ဆောင်ချက်များအဖြစ် ကိန်းရှင်များ) လည်း ရှိနိုင်သည်-
AngularJS ဥပမာ
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',
function($scope) {
$scope.firstName = "John";
$scope.lastName
= "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
ပြင်ပဖိုင်များတွင် ထိန်းချုပ်ကိရိယာများ
ပိုကြီးသော အပလီကေးရှင်းများတွင်၊ ထိန်းချုပ်ကိရိယာများကို ပြင်ပဖိုင်များတွင် သိမ်းဆည်းလေ့ရှိသည်။
<script> တဂ်များကြား ကုဒ်ကို personController.js ဟု အမည်ပေးထားသည့် ပြင်ပဖိုင် တစ်ခုသို့ ကူးယူလိုက်ပါ -
AngularJS ဥပမာ
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
နောက်ဥပမာ
နောက်နမူနာအတွက် controller ဖိုင်အသစ်တစ်ခုကို ဖန်တီးပါမည်။
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
ဖိုင်ကို namesController.js အဖြစ် သိမ်းဆည်း ပါ
ပြီးလျှင် အပလီကေးရှင်းတစ်ခုတွင် controller ဖိုင်ကို အသုံးပြုပါ။
AngularJS ဥပမာ
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>