Ornagai ကို Angular js ကို သုံးပြီးရေးမှပဲ Angular ကို သုံးတတ်တော့တယ်။ သုံးတတ်တယ်လို့တာ ဆိုပေမယ့် ကျွမ်းကျင်ဖို့ကတော့ လိုအုံးမယ်။ Angular ကို codeschool ကနေ သင်ပြီးတော့ လက်တွေ့ အသုံးပြုမယ်ဆိုတာ ornagai ကို ပြန်ရေးဖြစ်တယ်။ Backend API တော်တော်များများပြီးနေတာကြောင့် Angular js ကို ပိုပြီး အချိန်ပေးနိုင်တယ်။ စပြီး တွေ့ရတဲ့ ပြဿနာက ဘယ်ကနေ စမလဲ ဆိုတာပဲ။ ဘာတွေပါမလဲဆိုတာကို လည်း မသိဘူး။ စဉ်းစားလို့ရတာက search ပါမယ်။ ပြီးရင် ရလာတဲ့ result ကို ပြဖို့အတွက် နေရာပါမယ်။ ဒါက ပထမဆုံး ခြေလှမ်းပါပဲ။ ပထမဆုံး ဖန်တီး ဖြစ်တဲ့ Controller က search controller နဲ့ resultController ပဲ။ Angular.js မှာက ပြဿနာကို ဖြေရှင်းဖို့ နည်းလမ်းတွေက တစ်ခု ထက် မက ရှိနေတာပဲ။ Service , Provider , Factory အဲဒီ သုံး မျိုး နဲ့ တင် တော်တော် ရှုပ်နေတယ်။ တချို့တွေက Service ကို အသုံးပြုပြီး controller တစ်ခုနဲ့ တစ်ခု အလုပ်လုပ်ဖို့ ပြောတယ်။ တချို့က scope ကို အသုံးပြုဖို့ ပြောတယ်။ ဘယ်လိုပဲ အသုံးပြုပြု အတူတူပဲ။ ဘုံ function တွေကို Service , Provider , Factory ကို အသုံးပြုပြီး ရေးနိုင်တယ်။
အမှန်တိုင်းပြောရရင် Service သုံးသင့်လား Provider သုံးသင့်လား Factory သုံးသင့်လား ဆိုပြီး အမြဲတန်းဝေခွဲရ ခက်တယ်။ နောက်တစ်ချက်က OOP ကို ကောင်းကောင်း apply လုပ်လို့ မရဘူး။ angular.js ပေးထားတဲ့ flow အတိုင်းပဲ အလိုက်သင့် မျောသွား လိုက်ရ သလိုပဲ။ Angular.js ကို သုံးရတာ ကောင်းတယ်။ မကောင်းဘူး။ ကောင်းတယ်။ မကောင်းဘူး။ ထပ်ခါထပ်ခါ ဖြစ်နေတာတော့ အမှန်ပဲ။

Controller

Angular မှာ Controller က တော်တော်လေးကို နားလည် လွယ်တယ်။ နောက်ပြီး view နဲ့ တွဲပြီး အလုပ်လုပ်ရတာ တော်တော် အဆင်ပြေတယ်။ Angular စ သုံးကာစက ng attribute တွေကို သဘောမကျပေမယ့် ရေးရင်းနဲ့ တော်တော်သဘောကျလာတယ်။ သီးသန့် template system အစား HTML မှာပဲ ng attribute တွေကို သုံးထားတော့ သီးသန့် template engine ကို ထပ်ပြီး လေ့လာနေစရာ မလိုတော့ဘူး။ Controller နဲ့ view ဟာ controller က event တွေကို ng attribute တွေနဲ့ တွဲပြီး အလုပ်လုပ်ပြီး Controller ထဲမှာ သီးသန့် service , factory , provider တွေနဲ့ အလုပ်လုပ်နိုင်သလို အခြား library တွေနဲ့လည်း controller ထဲမှာ အလုပ်လုပ်နိုင်တယ်။

 

Directive

Angular မှာ Directive ဆိုတာက တော်တော် အသုံးဝင်တယ်။ Ornagai Project မှာ login , add form စတာတွေအကုန် directive ကို အသုံးပြုထားတယ်။ directive အသုံးပြုထားတဲ့ အတွက်ကြောင့် form က ပိုရှင်းသွားတယ်။ Directive ဆိုတာကတော့ ကျွန်တော်တို့ login အတွက်ဆိုရင်

<login-form></login-form>

စာလုံး ထည့်ဖို့ အတွက်

<add-form></add-form>

စသည်ဖြင့် လွယ်လင့် တကူ ခေါ်လိုက်လို့ရတယ်။ အဲဒီ အတွက် angular မှာ အောက်ကလို မျိုး ကြေငြာပေးရတယ်။

app.directive('loginForm', [function(){
// Runs during compile
return {
restrict : 'E',
templateUrl : 'template/loginform.html',
controller : 'userController',
controllerAs : "userCtr"
};

}]);
app.directive('addForm', [function(){
// Runs during compile
return {
restrict : 'E',
templateUrl : 'template/addform.html',
controller : 'addFormController',
controllerAs : "addCtr"
}
}]);

အဲဒီ အပိုင်းတွေကို CodeSchool မှာ လေ့လာလို့ရပါတယ်။

Routing and Location

Angular.js မှာ routing အတွက် ngRoute module လိုပါတယ်။ Routing ကတော့ ထွေထွေထူးထူး မရှိပါဘူး။ လေ့လာရတာ လွယ်ကူပါတယ်။ ဒီမှာ လေ့လာလို့ရတယ်။ ပြဿနာတစ်ခုက url ကနေ တိုက်ရိုက် လာရင် data ဆွဲထုတ် ရှာတာ အဆင်ပြေပေမယ့် click လုပ်တဲ့ အခါမှာ redner ပြန် မလုပ်ချင်ဘူး။ $location.path(“/myurl”) လို့ ခေါ်လိုက်ရင် routing ထဲ ရောက်သွားပြီးတော့ render ပြန်ပြန် လုပ်သွားတယ်။ အဲဒီအတွက် $location.path ကို ပြင်ရပါတယ်။

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}])

source from : http://joelsaupe.com/programming/angularjs-change-path-without-reloading/

broadcast and watch

Angular.js မှာ နောက်ထပ် သဘောကျတာက brodcast နဲ့ watch အပိုင်းပဲ။ Controller အခြင်းခြင်း အပြန်အလှန် ချိတ်ဆက်ပြီး အသုံးပြုလို့ရပါတယ်။

Bordcast အပိုင်းက rootScope နဲ့ ဖြစ်ဖြစ် factory ကနေ ဖြစ်ဖြစ် အဆင်ပြေတာနဲ့ လုပ်လို့ရတယ်။

$rootScope.$broadcast("searchQuery", {query:  this.searchquery});

Rootscope က brodcast လုပ်တာကို အခြား controller က scope နဲ့ ပြန်ပြီး listen လုပ်ထားလို့ရတယ်။

$scope.$on("searchQuery", function (event, args) {
    that.search(args.query);
});

Angular.js ဟာ အခြား module တွေ အများကြီး ရှိပြီးတော့ web development တစ်ခုတည်း အတွက် ဖန်တီးထားပါတယ်။ jQuery သုံးနေကျ လူတွေ အတွက် အစမှာ အခက်အခဲ ရှိပေမယ့် နောက်ပိုင်းမှာ ရေးရင်းနဲ့ အဆင်ပြေသွားနိုင်ပါတယ်။

တကယ်လို့ web development ပိုင်းကို လေ့လာနေတယ် ဆိုရင် angular.js ကို အချိန်လေး နည်းနည်းလောက်ပေးပြီး လေ့လာကြည့်သင့်ပါတယ်။