Angular Data binding

Angular js ဟာ two way data binding အမ်ိဳးအစားျဖစ္ပါတယ္။ binding ျပဳလုပ္ရာမွာ အပိုင္းသံုးပိုင္း ရွိပါတယ္။Model , View နဲ႔ Template တို႔ျဖစ္ပါတယ္။
Model ဆိုတာကေတာ႔  application ရဲ႕ data ေတြကို သိမ္းဆည္း ထိန္းခ်ဳပ္ရတဲ႔အပိုင္းျဖစ္ပါတယ္။
View ဆိုတာကေတာ႔ user ကိုယ္တိုင္ျမင္ေနရမယ့္ application web page ကိုဆိုလိုပါတယ္။
Template ဆိုတာကေတာ႔ angular code ေတြေပါင္းထားတဲ႔ Html code ေတြပဲျဖစ္ပါတယ္။ angular အေနနဲ႔ compile မလုပ္ရေသးပါဘူး။

Augular compile process
Angular ဟာ Template ထဲက Html tag ေတြ ကိုအရင္ရွာပါတယ္။အဲဒီမွာ ng-app directive ကိုေတြ႔တာနဲ႔ $rootScope တစ္ခုကိုဖန္တီးလိုက္ပါတယ္။ျပီးရင္ အဲဒီ tag ရဲ႕ အထဲမွာရွိတဲ႔ child DOM element ေတြကို စတင္ compile လုပ္ပါေတာ႔တယ္။
အဲဒီအခ်ိန္မွာ compile နဲ႔ linking ေခၚတဲ႔ process ႏွစ္ခုကိုလုပ္ေပးပါတယ္။compile process ဟာ child tag ေတြရဲ႕ directive ေတြကို လုိက္ရွာျပီး list လုပ္ေပးပါတယ္။ ျပီးရင္ ဦးစားေပးအလုိက္စီေပးပါတယ္။directive တစ္ခုစီမွာ ကိုယ္ပိုင္ compile function ကရွိႏွင့္ျပီးသားျဖစ္ပါတယ္။ အဲဒီ compile function အလုပ္လုပ္တဲ႔အခါမွာေတာ႔ သက္ဆိုင္ရာ DOM element ကို ျပင္ဆင္ ျပဳလုပ္လို႔ရသြားပါတယ္။
အဲဒီ compile function ေတြrun ျပီးသြားတဲ႔အခါမွေတာ႔ linking function ေတြကို return အေနနဲ႔ ထုတ္ေပးပါတယ္။အဲဒီ linking function ေတြကို angular က run ျပီးသြားတဲ႔အခါမွာေတာ႔ data bind လုပ္ျပီးသား ၊ event listener ေတြ bind ျပီးသား DOM element ေတြကို ထုတ္ေပးလုိက္ပါတယ္။

ဒါကေတာ႔ angular ဟာ two way data binding ျဖစ္ျပီး ဘယ္လို bind တယ္ဆိုတာကို ရွင္းျပေပးတာျဖစ္ပါတယ္။
အခု two way data binding ကိုယ္ဘယ္လိုအသံုးျပဳႏိုင္သလဲဆိုတာကို demo နဲ႔တကြရွင္းျပေပးပါမယ္။
Source Code

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    First Name <input ng-model="firstname"><br/>
    Last Name  <input ng-model="lastname"><br/>
    Full Name  {{ firstname }} {{ lastname }}
</div>
<script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
           $scope.firstname = "Kyaw";
           $scope.lastname = "Gyi";
      });
</script>

---

Demo Example
First Name:
Last Name:
Full Name :{{ firstname }} {{ lastname }}

---

အထက္က demo example နဲ႔ source code ကို ျပန္ရွင္းျပေပးပါ႔မယ္။ ng-app directive ကိုေတြ႔ျခင္းအားျဖင့္ ယခု application ဟာ ထို div tag အပိုင္အျဖစ္ angular ကို သိျမင္ေစပါတယ္။ထို႔ျပင္ angular application တစ္ခုတည္ရွိေၾကာင္းကို သိေစျပီး compile process ကို စတင္ေစပါတယ္။
script tag ထဲတြင္လည္း "myApp" application module တစ္ခုကိုတည္ေဆာက္ထားတာေတြ႔ရပါမယ္။
ေနာက္ app variable ထဲကို application ကို assign လုပ္ထားတာေတြ႔ရပါမယ္။

var app = angular.module('myApp', []);

ng-controller directive ဟာ အဲဒီ application ကို control လုပ္ေပးမယ့္ controller ကို သတ္မွတ္ေပးတာပါ။ controller object အသစ္ တစ္ခုကို ဖန္တီးေပးပါတယ္။ child scope တစ္ခုကိုုလည္းဖန္တီးေပးပါတယ္။ ဒီ application ၇ဲ႕ scope လို႔ဆိုလိုတာပါ။ ဒါေၾကာင့္ ဒီapplication ထဲမွာ တည္ေဆာက္တဲ႔ variable ေတြအတြက္ $scope ကိုထည့္သြင္းေပးထားရတာျဖစ္ပါတယ္။
eg: $scope.firstname, $scope.lastname
အဲဒီလို defined လုပ္ေပးမွ Html ဘက္က application scope မွာ အသံုးျပဳႏိုင္မွာျဖစ္ပါတယ္။

   $scope.firstname = "Kyaw";
    $scope.lastname = "Gyi";   

firstname နဲ႔ lastname ကို assign လုပ္ေပးတာျဖစ္ပါတယ္။ အဲလို assign လုပ္ေပးလိုက္တာနဲ႔
ng-model directive သံုးထားတဲ႔ input tag ေတြရဲ႕ တန္ဖိုးဟာ အလိုလိုေျပာင္းသြားပါတယ္။ view နဲ႔ model bind ထားတာေၾကာင့္ျဖစ္ပါတယ္။
ေနာက္တခုၾကည္႔ရေအာင္
full name မွာသံုးထားတာက expression ပါ။ expression ကို $scope varaible ေတြရဲ႕ တန္ဖိုးကိုထုတ္ျပ လိုတဲ႔အခါမွာသံုးႏိုင္ပါတယ္။

Full Name :{{ firstname }} {{ lastname }}

ဒါေၾကာင့္ application စ run တဲ႔အခါမွာ အေပၚက assign လုပ္ထားတဲ႔ တန္ဖိုးအတိုင္း firstname နဲ႔ lastname ကို ေဖာ္ျပေနၾကတာျဖစ္ပါတယ္။ အစမွာ Full name : Kyaw Gyi ဆိုျပီးျမင္ေနရမွာပါ။

အခု input tag ထဲက တန္ဖိုးကို ေျပာင္းၾကည့္ရေအာင္ ဒါဆို သူ႔ေအာက္မွာ ေရးထားတဲ႔ full name ကလိုက္ေျပာင္းတာကိုေတြ႔ရပါမယ္။

ဘာလို႔လဲဆိုေတာ႔ input tag ရဲ႕ တန္ဖိုး ေျပာင္းသြားတာနဲ႔ သူနဲ႔ bind လုပ္ထားတဲ႔ $scope variable ဟာ လုိက္ေျပာင္းပါတယ္။ဒါေၾကာင့္ အဲဒီ $scope variable ကို expression အေနနဲ႔ ေဖာ္ျပထားတဲ႔ full name ေနရာမွာ လုိက္ေျပာင္းေနၾကတာျဖစ္ပါတယ္။

ဒါေၾကာင့္ angular ကို two way binding လို႔ေခၚတာျဖစ္ပါတယ္။ $scope variable ၇ဲ တန္ဖိုးေျပာင္းလဲမႈဟာ bind ထားတဲ႔ input tag element ရဲ႕ တန္ဖိုးကိုေျပာင္းလဲေစျပီးေတာ႔ ၊ အဲဒီ input tag ၇ဲ႕ တန္ဖိုးကိုေျပာင္းလိုက္ရင္ လည္း bind ထားတဲ႔ scope variable ရဲ႕ တန္ဖိုးလည္းေျပာင္းသြားပါတယ္။

angular js အေၾကာင္းကို အတတ္ႏိုင္ဆံုး ဖတ္ရႈနားလည္ေအာင္လုပ္ျပီး ျပန္လည္ေရးသားထားတာျဖစ္ပါတယ္။ ေသခ်ာေပါက္ လုိအပ္ခ်က္ေတြရွိေနႏိုင္ပါတယ္။ ဒါေၾကာင့္ ဒီ post ကေန နားလည္သင့္သေလာက္ နားလည္ျပီးရင္ online မွာလည္း ဆက္လက္ဖတ္ရႈၾကရန္ အၾကံျပဳလုိပါတယ္။

သိပ္နားမလည္ဘူးထင္ရင္ ႏွစ္ခါျပန္ဖတ္ပါ။

reference
http://www.w3schools.com/angular
https://docs.angularjs.org/guide
http://daginge.com/technology/2014/03/04/understanding-template-compiling-in-angularjs/

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest