AngularJS နိဒါန်း
AngularJS သည် JavaScript framework တစ်ခုဖြစ်သည်။ ၎င်းကို <script> tag ဖြင့် HTML စာမျက်နှာသို့ ပေါင်းထည့်နိုင်သည်။
AngularJS သည် ညွှန်ကြားချက် များနှင့်အတူ HTML အရည်အချင်းများကို တိုးချဲ့ပြီး ဒေတာကို HTML သို့ Expressions ဖြင့် ပေါင်းစည်းသည် ။
AngularJS သည် JavaScript Framework တစ်ခုဖြစ်သည်။
AngularJS သည် JavaScript တွင်ရေးသားထားသော JavaScript framework တစ်ခုဖြစ်သည်။
AngularJS ကို JavaScript ဖိုင်အဖြစ် ဖြန့်ဝေထားပြီး script tag ဖြင့် ဝဘ်စာမျက်နှာသို့ ပေါင်းထည့်နိုင်သည်-
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS သည် HTML ကို တိုးချဲ့သည်။
AngularJS သည် ng-directives ဖြင့် HTML ကို တိုးချဲ့သည် ။
ng-app ညွှန်ကြားချက်သည် AngularJS အ ပလီကေးရှင်းကို သတ်မှတ်သည်။
ng-model ညွှန်ကြားချက်သည် HTML ထိန်းချုပ်မှုများ (ထည့်သွင်းမှု၊ ရွေးချယ်မှု၊ စာသားဧရိယာ) ၏ တန်ဖိုးကို အပလီကေးရှင်းဒေတာနှင့် ပေါင်းစပ်ထားသည်။
ng-bind ညွှန်ကြားချက်သည် အ ပလီကေးရှင်းဒေတာကို HTML မြင်ကွင်းသို့ ပေါင်းစည်းသည်။
AngularJS ဥပမာ
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
ဥပမာ ရှင်းပြထားသည်-
ဝဘ်စာမျက်နှာကို တင်သည့်အခါ AngularJS သည် အလိုအလျောက် စတင်သည်။
ng-app ညွှန်ကြားချက် တွင် <div> ဒြပ်စင်သည် AngularJS အပလီကေးရှင်း တစ်ခု၏ "ပိုင်ရှင်" ဖြစ်ကြောင်း AngularJS အား ပြောပြသည် ။
ng-model ညွှန်ကြားချက်သည် ထည့်သွင်းမှုအကွက် ၏ တန်ဖိုးကို အပလီကေးရှင်းပြောင်းလဲနိုင်သော အမည် နှင့် ပေါင်းစည်းသည် ။
ng-bind ညွှန်ကြားချက်သည် <p> ဒြပ်စင်၏ အကြောင်းအရာကို အပလီကေးရှင်း ပြောင်းလဲနိုင်သော အမည် နှင့် ပေါင်းစပ် ထားသည် ။
AngularJS ညွှန်ကြားချက်များ
သင်မြင်ပြီးဖြစ်သည့်အတိုင်း AngularJS လမ်းညွှန်ချက်များသည် ng ရှေ့ဆက် ပါရှိသော HTML အရည်အချင်းများ ဖြစ်သည်။
ng-init ညွှန်ကြားချက်သည် AngularJS အပလီကေးရှင်း variable များကို အ စ ပြုသည်။
AngularJS ဥပမာ
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
တရားဝင် HTML ဖြင့် တနည်းအားဖြင့်
AngularJS ဥပမာ
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
သင့်စာမျက်နှာ HTML ကို တရားဝင်အောင်ပြုလုပ်လိုပါက ng- အစား data-ng- ကိုသုံးနိုင်သည် ။
ဤကျူတိုရီရယ်တွင် နောက်ပိုင်းတွင် ညွှန်ကြားချက်များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။
AngularJS Expressions
AngularJS expression များကို double braces အတွင်းတွင် ရေးထားသည်- {{ expression }} .
AngularJS သည် စကားရပ်ကို ရေးသားသည့်နေရာတွင် ဒေတာကို "ထုတ်ပေးမည်" လိမ့်မည်-
AngularJS ဥပမာ
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS အသုံးအနှုန်းများသည် ng-bind ညွှန်ကြားချက် ကဲ့သို့ပင် AngularJS ဒေတာကို HTML နှင့် ချိတ်ဆက်သည်။
AngularJS ဥပမာ
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
ဤသင်ခန်းစာတွင် နောက်ပိုင်းတွင် စကားအသုံးအနှုန်းများအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။
AngularJS အပလီကေးရှင်းများ
AngularJS မော်ဂျူး များသည် AngularJS အပလီကေးရှင်းများကို သတ်မှတ်သည်။
AngularJS ထိန်းချုပ်သူများသည် AngularJS အပလီကေးရှင်းများကို ထိန်းချုပ်သည်။
ng-app ညွှန်ကြားချက်သည် အပလီကေးရှင်းကို သတ်မှတ်သည်၊ ng -controller ညွှန်ကြားချက်သည် controller ကို သတ်မှတ်သည်။
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 မော်ဂျူးများသည် အပလီကေးရှင်းများကို သတ်မှတ်သည်-
AngularJS မော်ဂျူး
var app = angular.module('myApp', []);
AngularJS controllers ထိန်းချုပ်မှုအပလီကေးရှင်းများ
AngularJS Controller
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
ဤသင်ခန်းစာတွင် နောက်ပိုင်းတွင် modules နှင့် controllers များအကြောင်း ပိုမိုလေ့လာနိုင်မည်ဖြစ်ပါသည်။