AngularJS ပုံစံများ
AngularJS ရှိ ဖောင်များသည် ဒေတာစည်းနှောင်မှုနှင့် ထည့်သွင်းထိန်းချုပ်မှုများကို တရားဝင်အောင် ဆောင်ရွက်ပေးသည်။
ထည့်သွင်းထိန်းချုပ်မှုများ
ထည့်သွင်းမှုထိန်းချုပ်မှုများသည် HTML ထည့်သွင်းသည့်ဒြပ်စင်များဖြစ်သည်-
- input အစိတ်အပိုင်းများ
- အစိတ်အပိုင်းများကိုရွေးချယ်ပါ။
- ခလုတ်အစိတ်အပိုင်းများ
- textarea အစိတ်အပိုင်းများ
Data-Binding
ng-modelထည့်သွင်းထိန်းချုပ်မှုများသည် ညွှန်ကြားချက် ကိုအသုံးပြုခြင်းဖြင့် ဒေတာစည်းနှောင်မှုကို ပံ့ပိုးပေးသည်
။
<input type="text" ng-model="firstname">
အပလီကေးရှင်းတွင်ယခုအမည်ရှိသောပိုင်ဆိုင်မှုတစ်ခုရှိသည် firstname။
ညွှန်ကြားချက် သည် ng-modelinput controller ကို သင့်အပလီကေးရှင်း၏ကျန်နှင့် ချိတ်ဆက်ပေးသည်။
ပိုင်ဆိုင်မှု firstnameကို ထိန်းချုပ်ကိရိယာတစ်ခုတွင် ရည်ညွှန်းနိုင်သည်-
ဥပမာ
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
၎င်းကို အပလီကေးရှင်းရှိ အခြားနေရာများသို့လည်း ရည်ညွှန်းနိုင်သည်-
ဥပမာ
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
အမှတ်ခြစ်ပါ။
checkbox တွင် တန်ဖိုး trueသို့မဟုတ် false. ng-modelညွှန်ကြားချက်ကို အမှန်ခြစ်ဘောက်စ်တစ်ခုတွင် အသုံးပြုပြီး သင့်အပလီကေးရှင်းတွင် ၎င်း၏တန်ဖိုးကို အသုံးပြုပါ ။
ဥပမာ
checkbox ကို အမှန်ခြစ်ထားလျှင် ခေါင်းစီးကို ပြပါ-
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
ရေဒီယိုခလုတ်များ
ng-model
ညွှန်ကြားချက် ဖြင့် သင့်အပလီကေးရှင်းတွင် ရေဒီယိုခလုတ်များကို ချိတ်ပါ။
တူညီသော ရေဒီယိုခလုတ် ng-modelများသည် မတူညီသောတန်ဖိုးများ ရှိနိုင်သော်လည်း ရွေးချယ်ထားသည့်တစ်ခုတည်းကိုသာ အသုံးပြုပါမည်။
ဥပမာ
ရွေးချယ်ထားသော ရေဒီယိုခလုတ်၏ တန်ဖိုးအပေါ် အခြေခံ၍ စာသားအချို့ကို ပြသပါ-
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
myVar ၏တန်ဖိုးသည် dogs, tuts, သို့မဟုတ်
cars.
ရွေးကွက်
ng-model
ညွှန်ကြားချက် ဖြင့် ရွေးချယ်ထားသော ဘောက်စ်များကို သင့်လျှောက်လွှာတွင် ချိတ်ပါ။
attribute တွင် သတ်မှတ်ထားသော ပိုင်ဆိုင်မှု ng-modelသည် selectbox တွင် ရွေးချယ်ထားသော option ၏တန်ဖိုးများ ရှိလိမ့်မည်။
ဥပမာ
ရွေးချယ်ထားသောရွေးချယ်မှု၏တန်ဖိုးအပေါ်အခြေခံ၍ စာသားအချို့ကိုပြသပါ-
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
myVar ၏တန်ဖိုးသည် dogs, tuts, သို့မဟုတ်
cars.
AngularJS ဖောင်နမူနာတစ်ခု
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
လျှောက်လွှာကုဒ်
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
Novalidate attribute သည် HTML5 တွင် အသစ်ဖြစ်သည် ။ ၎င်းသည် မည်သည့် မူရင်းဘရောက်ဆာ တရားဝင်မှုကိုမဆို ပိတ်ပေးသည်။
နမူနာရှင်းပြထားပါတယ်။
ng-app ညွှန်ကြားချက်သည် AngularJS အ ပလီကေးရှင်းကို သတ်မှတ်သည်။
ng-controller ညွှန်ကြားချက် သည် application controller ကို သတ်မှတ်သည်။
ng-model ညွှန်ကြားချက်သည် မော်ဒယ် ရှိ အသုံးပြုသူ အရာဝတ္တုနှင့် ထည့်သွင်းသည့်ဒြပ်စင်နှစ်ခုကို ပေါင်းစပ် ထားသည်။
formCtrl controller သည် မူလတန်ဖိုးများကို master object တွင် သတ်မှတ်ပြီး reset() method ကို သတ်မှတ်သည်။
reset() method သည် user object ကို master object နှင့် ညီ စေသည်။
ng-click ညွှန်ကြားချက်သည် ခလုတ်ကို နှိပ်မှသာ reset() နည်းလမ်းကို ခေါ်ဆိုပါသည်။
ဤအပလီကေးရှင်းအတွက် novalidate attribute ကိုမလိုအပ်သော်လည်း ပုံမှန်အားဖြင့် Standard HTML5 validation ကို အစားထိုးရန်အတွက် AngularJS ဖောင်များတွင် ၎င်းကို အသုံးပြုမည်ဖြစ်သည်။