AngularJS ညွှန်ကြားချက်များ

AngularJS သည် သင့်အား Directives ဟုခေါ်သော အရည်အချင်းအသစ်များဖြင့် HTML ကို တိုးချဲ့နိုင်စေပါသည် ။

AngularJS တွင် သင့်အပလီကေးရှင်းများအတွက် လုပ်ဆောင်နိုင်စွမ်းကို ပေးဆောင်သည့် built-in ညွှန်ကြားချက်များ အစုံရှိပါသည်။

AngularJS သည် သင့်ကိုယ်ပိုင်လမ်းညွှန်ချက်များကို သတ်မှတ်ဖော်ပြနိုင်သည်။

AngularJS ညွှန်ကြားချက်များ

AngularJS ညွှန်ကြားချက်များသည် ရှေ့ဆက်နှင့်အတူ တိုးချဲ့ HTML ရည်ညွှန်းချက်များ ng-ဖြစ်သည်။

ng-appညွှန်ကြားချက်သည် AngularJS အပလီကေးရှင်းကို စတင်စေသည် ။

ng-initညွှန်ကြားချက်သည် အပလီကေးရှင်းဒေတာ ကို အစ ပြုသည်။

ng-modelညွှန်ကြားချက်သည် HTML ထိန်းချုပ်မှုများ (ထည့်သွင်းမှု၊ ရွေးချယ်မှု၊ စာသားဧရိယာ) ၏တန်ဖိုးကို အပလီကေးရှင်းဒေတာနှင့် ပေါင်းစပ်ထားသည် ။

ကျွန်ုပ်တို့၏ AngularJS ညွှန်ကြားချက်အကိုး အကား တွင် AngularJS လမ်းညွှန်ချက်အားလုံးကို ဖတ်ပါ ။

ဥပမာ

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

ညွှန်ကြားချက် တွင် ng-app<div> ဒြပ်စင်သည် AngularJS အပလီကေးရှင်း၏ "ပိုင်ရှင်" ဖြစ်ကြောင်း AngularJS ကိုလည်း ပြောပြသည်။

Data Binding

အထက်ဖော်ပြပါ {{ firstName }}ဥပမာတွင် ဖော်ပြချက်သည် AngularJS data binding expression ဖြစ်သည်။

AngularJS တွင် Data binding သည် AngularJS အသုံးအနှုန်းများကို AngularJS ဒေတာဖြင့် ပေါင်းစပ်ထားသည်။

{{ firstName }}နှင့် ချည်နှောင်ထားသည် ng-model="firstName"။

နောက်ဥပမာတွင် စာသားအကွက်နှစ်ခုကို ng-model လမ်းညွှန်ချက်နှစ်ခုဖြင့် တွဲထားသည်။

ဥပမာ

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

သုံး ng-initတာက သိပ်အသုံးများတာ မဟုတ်ဘူး။ Controllers များအကြောင်း အခန်းတွင် ဒေတာကို စတင်ပုံသွင်းနည်းကို သင်လေ့လာပါမည်။

HTML Elements များကို ထပ်ခါတလဲလဲလုပ်ခြင်း။

ng-repeatညွှန်ကြားချက်သည် HTML ဒြပ်စင်တစ်ခုကို ထပ်ခါတလဲလဲ လုပ်ဆောင်သည် -

ဥပမာ

ng-repeatညွှန်ကြားချက်သည် အမှန်တကယ် စုစည်းမှုတစ်ခုရှိ အရာတစ်ခုစီအတွက် HTML ဒြပ်စင်များကို တစ်ကြိမ်စီပွား သည် ။

အ ng-repeatရာဝတ္ထုများ ခင်းကျင်းရာတွင် အသုံးပြုသည့် ညွှန်ကြားချက်

ဥပမာ

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

AngularJS သည် CRUD (Create Read Update Delete) အပလီကေးရှင်းများအတွက် ပြီးပြည့်စုံသည်။
ဤအရာဝတ္ထုများသည် ဒေတာဘေ့စ်တစ်ခုမှ မှတ်တမ်းများဖြစ်မည်ကို စိတ်ကူးကြည့်ပါ။

အက်ပ်အတွင်း ညွှန်ကြားချက်

ng-appညွှန်ကြားချက်သည် AngularJS အပလီကေးရှင်း တစ်ခု၏ အမြစ်ဒြပ်စင် ကို သတ်မှတ်သည်။

ng-appဝဘ်စာမျက်နှာကို တင်သည့်အခါ ညွှန်ကြားချက် သည် အ ပလီကေးရှင်းကို အလိုအလျောက် bootstrap (အလိုအလျောက် စတင်ခြင်း) ပေးလိမ့်မည်။

အပူလမ်းညွှန်

ng-initညွှန်ကြားချက်သည် AngularJS အပလီကေးရှင်းအတွက် ကနဦးတန်ဖိုးများကို သတ်မှတ်သည် ။

ပုံမှန်အားဖြင့် သင်သည် ng-init ကို အသုံးမပြုပါ။ ၎င်းအစား သင်သည် ထိန်းချုပ်ကိရိယာ သို့မဟုတ် မော်ဂျူးကို အသုံးပြုမည်ဖြစ်သည်။

ထိန်းချုပ်ကိရိယာများနှင့် မော်ဂျူးများအကြောင်း နောက်ပိုင်းတွင် သင်သည် ပိုမိုလေ့လာနိုင်မည်ဖြစ်သည်။

မော်ဒယ်ညွန်ကြားချက်

ng-modelညွန်ကြားချက်မှာလည်း -

လျှောက်လွှာဒေတာ (နံပါတ်၊ အီးမေးလ်၊ လိုအပ်သည်) အတွက် အမျိုးအစားမှန်ကန်ကြောင်း အတည်ပြုပေးပါ။
အပလီကေးရှင်းဒေတာ (မမှန်ကန်ခြင်း၊ ညစ်ပတ်ခြင်း၊ ထိမိခြင်း၊ အမှားအယွင်း) အတွက် အခြေအနေကို ပံ့ပိုးပါ။
HTML ဒြပ်စင်များအတွက် CSS အတန်းများကို ပံ့ပိုးပါ။
HTML အစိတ်အပိုင်းများကို HTML ပုံစံများနှင့် ချိတ်ပါ။

ng-modelနောက်အခန်းတွင် ညွှန်ကြားချက် အကြောင်း ပိုမိုဖတ်ပါ ။

ညွှန်ကြားချက်အသစ်များ ဖန်တီးပါ။

Built-in AngularJS ညွှန်ကြားချက်များအပြင်၊ သင့်ကိုယ်ပိုင်လမ်းညွှန်ချက်များကို သင်ဖန်တီးနိုင်သည်။

လုပ်ဆောင်ချက်ကို အသုံးပြု၍ လမ်းညွှန်ချက်အသစ်များကို ဖန်တီး .directiveပါသည်။

ညွှန်ကြားချက်အသစ်ကို ခေါ်ဆိုရန်အတွက် လမ်းညွှန်ချက်အသစ်ကဲ့သို့ တဂ်အမည်တူ HTML အစိတ်အပိုင်းတစ်ခု ပြုလုပ်ပါ။

ညွှန်ကြားချက်တစ်ခုကို အမည်ပေးရာတွင်၊ သင်သည် ကုလားအုတ်အိတ်အမည်ကို အသုံးပြု w3TestDirectiveရမည်ဖြစ်ပြီး၊ ၎င်းကို ခေါ်ဆိုသည့်အခါတွင် -သီးခြားအမည်ကို အသုံးပြုရမည် w3-test-directive၊

ဥပမာ

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  };
});
</script>

</body>

သင်သည် အောက်ပါတို့ကို အသုံးပြု၍ ညွှန်ကြားချက်ကို တောင်းခံနိုင်သည်။

ဒြပ်အမည်
ဂုဏ်ရည်
အတန်း
မှတ်ချက်

အောက်ဖော်ပြပါ ဥပမာများသည် အားလုံးတူညီသောရလဒ်ကို ထုတ်ပေးလိမ့်မည်-

ဒြပ်အမည်

<w3-test-directive></w3-test-directive>

ဂုဏ်ရည်

အတန်း

မှတ်ချက်

ကန့်သတ်ချက်များ

နည်းလမ်းအချို့ဖြင့်သာ သင့်ညွှန်ကြားချက်များကို ကန့်သတ်နိုင်သည်။

ဥပမာ

restrictတန်ဖိုး ဖြင့် ပစ္စည်းတစ်ခုကို ပေါင်းထည့်ခြင်းဖြင့် "A"၊ ညွှန်ကြားချက်ကို attribute များဖြင့်သာ ခေါ်ဆိုနိုင်သည်-

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  };
});

တရားဝင်ကန့်သတ်တန်ဖိုးများမှာ-

E Element အမည်အတွက်
A Attribute အတွက်
C အတန်းအတွက်
M မှတ်ချက်အတွက်

default အနေဖြင့် value သည် EAElement အမည်များနှင့် attribute name နှစ်ခုလုံးသည် ညွှန်ကြားချက်ကို ခေါ်ဆိုနိုင်သည်ဟု ဆိုလိုသည်။

❮ ယခင် နောက်တစ်ခု ❯

ကျူတိုရီရယ်

ဥပမာများ

အကိုးအကား

AngularJS ညွှန်ကြားချက်များ