AngularJS မော်ဂျူးများ
AngularJS module တစ်ခုသည် အပလီကေးရှင်းတစ်ခုအား သတ်မှတ်သည်။
မော်ဂျူးသည် အပလီကေးရှင်းတစ်ခု၏ မတူညီသောအစိတ်အပိုင်းများအတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
မော်ဂျူးသည် အပလီကေးရှင်းထိန်းချုပ်ကိရိယာများအတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
ထိန်းချုပ်ကိရိယာများသည် မော်ဂျူးတစ်ခုတွင် အမြဲတမ်းရှိသည်။
Module ဖန်တီးခြင်း။
AngularJS လုပ်ဆောင်ချက်ကို အသုံးပြု၍ မော်ဂျူးတစ်ခုကို ဖန်တီးသည်။ angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" ကန့်သတ်ချက်သည် အပလီကေးရှင်းလည်ပတ်မည့် HTML အစိတ်အပိုင်းကို ရည်ညွှန်းသည်။
ယခု သင်သည် သင်၏ AngularJS အပလီကေးရှင်းတွင် ထိန်းချုပ်ကိရိယာများ၊ ညွှန်ကြားချက်များ၊ စစ်ထုတ်မှုများနှင့် အခြားအရာများကို ထည့်သွင်းနိုင်ပြီဖြစ်သည်။
Controller တစ်ခုထည့်ခြင်း။
ng-controllerသင့်အပလီကေးရှင်းတွင် ထိန်းချုပ်ကိရိယာတစ်ခုထည့်ပါ၊ ညွှန်ကြားချက် ဖြင့် ထိန်းချုပ်ကိရိယာကို ကိုးကားပါ
-
ဥပမာ
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
ဤသင်ခန်းစာတွင် နောက်ပိုင်းတွင် ထိန်းချုပ်ကိရိယာများအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။
ညွှန်ကြားချက်တစ်ခုထည့်ခြင်း။
AngularJS တွင် သင့်အပလီကေးရှင်းတွင် လုပ်ဆောင်နိုင်စွမ်းကိုထည့်သွင်းရန် သင်အသုံးပြုနိုင်သည့် built-in လမ်းညွှန်ချက်အစုံရှိသည်။
အကိုးအကားအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ AngularJS ညွှန်ကြားချက် အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။
ထို့အပြင် သင့်အပလီကေးရှင်းများသို့ သင့်ကိုယ်ပိုင်လမ်းညွှန်ချက်များကို ထည့်သွင်းရန် မော်ဂျူးကို အသုံးပြုနိုင်သည်။
ဥပမာ
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
ဤသင်ခန်းစာတွင် နောက်ပိုင်းတွင် လမ်းညွှန်ချက်များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။
ဖိုင်များတွင် မော်ဂျူးများနှင့် ထိန်းချုပ်ကိရိယာများ
JavaScript ဖိုင်များတွင် module နှင့် controller များကိုထည့်ရန် AngularJS အပလီကေးရှင်းများတွင်ပုံမှန်ဖြစ်သည်။
ဤဥပမာတွင်၊ "myApp.js" တွင် အပလီကေးရှင်း module အဓိပ္ပါယ်ဖွင့်ဆိုချက်တစ်ခုပါရှိသည်၊ "myCtrl.js" တွင် controller ပါဝင်သည်-
ဥပမာ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
မော်ဂျူးအဓိပ္ပါယ်ဖွင့်ဆိုချက်ရှိ [] ပါရာမီတာကို မှီခိုနေသော မော်ဂျူးများကို သတ်မှတ်ရန် အသုံးပြုနိုင်သည်။
[] ပါရာမီတာမပါဘဲ၊ သင်သည် မော်ဂျူးအသစ်တစ်ခုကို ဖန်တီးနေသည်မဟုတ်ဘဲ ရှိပြီးသား တစ်ခုကို ပြန်လည်ရယူ နေပါသည်။
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
လုပ်ဆောင်ချက်များသည် Global Namespace ကို ညစ်ညမ်းစေနိုင်သည်။
JavaScript တွင် ကမ္ဘာလုံးဆိုင်ရာလုပ်ဆောင်ချက်များကို ရှောင်ကြဉ်သင့်သည်။ ၎င်းတို့ကို အခြား script များဖြင့် အလွယ်တကူ ဖျက်ချနိုင်သည်။
AngularJS module များသည် လုပ်ဆောင်ချက်များကို module တွင် ထားရှိခြင်းဖြင့် ဤပြဿနာကို လျှော့ချပေးပါသည်။
စာကြည့်တိုက်ကို ဘယ်တော့ဖွင့်မလဲ။
ဒြပ်စင် ၏အဆုံးတွင် scripts များကိုနေရာချရန် HTML အပလီကေးရှင်းများတွင် အဖြစ်များသော်လည်း
<body>AngularJS စာကြည့်တိုက်ကို <head>သို့မဟုတ် <body>.
angular.moduleအကြောင်းမှာ ဒစ်ဂျစ်တိုက်ကို တင်ပြီးမှသာ ခေါ်ဆိုမှုများကို စုစည်းနိုင်သောကြောင့် ဖြစ်သည်။
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>