Angular Js ,
ဒါေလးေတြ အရင္မွတ္ထားလိုက္
ng-app ,ng-bind, ng-model
ဒါဆိုစလို့ရျပီ .. angularjs.org ကေန သူ့ရဲ့ stable ျဖစ္တဲ့ js file ကို ေဒါင္းထားလိုက္မယ္ .
xampp ျဖစ္ျဖစ္ wamp ျဖစ္ျဖစ္ local server တခုခုလည္း ကုိယ့္စက္ထဲသြင္းထားျပီးသားလို့ယူဆရေအာင္ ။
ဘာေျကာင့္server လိုတာလဲဆိုေတာ့ သူအလုပ္လုပ္ပံုက brower request လွမ္းလုပ္တဲ့အခ်ိန္မွာ server ကေန
browser cache ထဲမွာ ေနေနျပီး လိုအပ္တဲ့အပိုင္းေလာက္ပဲ server ကုိလွမ္း လွမ္းျပီးအလုပ္လုပ္
ေပးတာမို့လို့ပါ ။ရနိုင္တဲ့ အက်ိုးေက်းဇူးကေတာ့ အရမ္းျမန္သြားတာေပါ့..
တျခားလုပ္နိုင္တာေတြရွိပါေသးတယ္ .စမ္းျကည့္ယံုအတြက္ မွာ server မပါပဲလည္းရပါတယ္ ။
html တစ္ဖိုင္ေဆာက္လိုက္ , angular Js နဲ့ လင့္ဖမ္းခ်ိတ္လိုက္ ရင္ angular Js ရဲ့ directive ေတြယူသံုးလို့ရေနပါျပီ။
ပံုစံေလးျပမယ္။ေအာက္မွာျကည့္ျကည့္ ..
<!DOCTYPE html>
<html lang="en-US">
<script src=“js/angular.min.js”></script> // ဒါဆို angularJs နဲ့ခ်ိတ္လိုက္ျပီ
<body>
<div ng-app=“”>//ခုနက မွတ္ထားခိုင္းတာေလးလာျပီ။ angularJs အလုပ္လုပ္မယ့္ေနရာကိုသတ္မွတ္ေပးလိုက္တာပါ။
အျမဲတမ္း ဒီကေနပဲစရပါတယ္ ။ညီမ်ွျခင္း ဒီဘက္ “”အလြတ္ထားထားတာက ေလာေလာဆယ္ ဒီ div tag အတြက္သီးသန့္ app မရွိဘူး လို့ေျပာခ်င္တာပါ။
<p>Name : <input type="text" ng-model="name"></p>//ng-model ထဲသတ္မွတ္ထားတဲ့အရာကိုျပန္ေခၚသံုးလို့ရပါတယ္။
<h1>Hello {{name}}</h1><br/>//ဒီမွာျပန္ေခၚသံုးလိုက္ပါျပီ ။{{}} အထဲမွာေရးဖို့ angular Js ကသတ္မွတ္ထားပါတယ္.
<h1>Hello <em ng-bind=“name”></em></h1> // {{}}နဲ့မေရးခ်င္ရင္ေတာ့ ng-bind ကုိေခၚသံုးနိုင္ပါတယ္ ။
</div>
</body>
</html>
browser မွာစမ္းျကည့္ .. ရျပီ ။
na-app ထည့္ထားတဲ့ tag က ေနစျပီး angularJs အလုပ္လုပ္ပါတယ္။သူ့အတြက္ app တစ္ခုဖန္တီးမယ္ဆိုရင္ ေတာ့module ေရးရပါတယ္။
အဲ့ဒီ module ထဲမွာ controller တစ္ခုေတာ့အနည္းဆံုးရွိရတယ္။ အဲ့ဒါကို ေစာေစာ က ng-model ကေနျပန္ေခၚျပီး HTML မွာresult ျပန္ျပလို့ရပါတယ္။
module , controller တစ္ခုစီသပ္သပ္စီေရးတာျဖစ္လို့ ဒီလိုပံုစံကပိုျပီး ျပင္ဆင္တည္းျဖတ္ ခ်ဲ့ထြင္ လုပ္ကုိင္ရတာမွာလြယ္ကူေစပါတယ္။
ကဲပံုစံသစ္ေလးစရေအာင္ .. ဒါေလးေတြထပ္မွတ္ထားလိုက္ ပါဦး။
<div ng-app="myApp" ng-controller=“myCtrl”>…</div>
<p>blah blah </p>
<script>
var app = angular.module("myApp", []);
app.controller(“myCtrl”,function(){
………………
});
</script>
အခု ng-app ထဲမွာသံုးမယ့္ app ရွိေနပါျပီ .. controller မွာေတာ့ ကိုယ္အလုပ္လုပ္ေစခ်င္တဲ့ အရာအတြက္ function ေရးရပါတယ္ ။
function မွာ javascript ပံုစံ အတိုင္း function name မပါပဲ function (){…….} ဆိုျပီးေရးနိုင္ပါတယ္ ။angular Jsရဲ့ ပံုစံျဖစ္တဲ့ module
နဲ့ controller မွာေတာ့ na-app , ng-controller တို့ကေနျပန္ေခၚဖို့အတြက္ name ေတြလိုအပ္ပါတယ္ ။ကြင္းထဲမွာေရးရတာ(“myApp”,[])
က angular ရဲ့ပံုစံပါ ။ေစာေစာက ေရးထားတာေလးကိုပဲ Model ,View ,Controller (MVC) ပံုစံျပန္ေရးျကည့္မယ္ .
ပိုျပီး ရွင္းရွင္းလင္းလင္းျဖစ္ေအာင္ myApp အတြက္ js တစ္ဖိုင္သပ္သပ္ေရးျပီး လာထည့္ေပးလိုက္ပါတယ္ ။
(HTML ဖိုင္မွာ )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Intro</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> // module myApp ထဲက controller myCtrl အေနနဲ့ ေရးထားတဲ့ functionကိုလွမ္းေခၚတာပါ။
<label>First Name :</label><input type="text" ng-model="firstName" ><br/>
<label>Last Name:</label><input type="text" ng-model="lastName">
<br/>
<p>Hello ! {{firstName + " " + lastName}}</p><br/>
</div>
<script src="js/angular.min.js"></script>
<script src="js/myapp.js"></script>
</body>
</html>
javascript ဖိုင္ကို ခ်ိတ္ရာမွာ CSS လိုမ်ိုး <head> ထဲမွာပဲခ်ိတ္ရမယ္လို့မဆိုလိုပါဘူး ။ အခုလိုမ်ိုး </body> အပိတ္နားမွာ ခ်ိတ္လည္း
ရပါတယ္။ပံုမွန္အားျဖင့္ Browser က HTML ကို run ျပီးမွ Javascript ကို
run တာျဖစ္လို့ သူ့ကိုေနာက္ဆံုးနားမွ လာေရးတာကပိုျပီး သဘာ၀က်ပါတယ္။
(myApp.js ဖိုင္မွာ )
var app=angular.module("myApp”,[]); // module တစ္ခုကိုေရးနည္းအတိုင္းေဆာက္ျပီး app နာမည္နဲ့ထားလိုက္ပါတယ္ ။
app.controller ("myCtrl",function ($scope){ // အဲ့ module class ထဲကေန controller တစ္ခုကိုဆြဲယူတည္ ေဆာက္ျပီး function တစ္ခုထည့္သြင္းေပးလိုက္ပါတယ္ ။
$scope.firstName ="Aung";
$scope.lastName ="Maung";
});
browser မွာ run ျကည့္ပါဦး။ ေနာက္ထပ္ ng-init ,ng-hide ,ng-show တို့ရဲ့ စိတ္၀င္စားဖြယ္ အသံုး၀င္ပံုေတြေလးေတြေျပာစရာရွိပါေသးတယ္။
ပညာရပ္ တစ္ခုေလ့လာမယ္ဆိုရင္ ‘အစ’ ေလးကအရမ္းအေရးျကီးပါတယ္။ အစေလးေသခ်ာနားလည္ရင္ ထပ္ျပီးဆြဲထုတ္ေလ့လာသြားလို့ရပါျပီ ။
No comments:
Post a Comment