AngularJS ဝန်ဆောင်မှုများ


AngularJS တွင် သင်သည် သင်၏ကိုယ်ပိုင်ဝန်ဆောင်မှုကို ပြုလုပ်နိုင်သည်၊ သို့မဟုတ် တပ်ဆင်ပါရှိသော ဝန်ဆောင်မှုများစွာထဲမှ တစ်ခုကို အသုံးပြုနိုင်သည်။


ဝန်ဆောင်မှုဆိုတာဘာလဲ။

AngularJS တွင်၊ ဝန်ဆောင်မှုတစ်ခုသည် သင်၏ AngularJS အက်ပ်လီကေးရှင်းအတွက် ရနိုင်သော၊ ကန့်သတ်ချက်ရှိသော လုပ်ဆောင်ချက်တစ်ခု သို့မဟုတ် အရာဝတ္ထုတစ်ခုဖြစ်သည်။

AngularJS တွင် built-in ဝန်ဆောင်မှု 30 ခန့်ရှိသည်။ အဲဒီထဲက တစ်ခုက $location ဝန်ဆောင်မှုပါ။

ဝန်ဆောင်မှုတွင် လက်ရှိ $locationဝဘ်စာမျက်နှာ၏ တည်နေရာနှင့်ပတ်သက်သည့် အချက်အလက်ကို ပြန်ပေးသည့် နည်းလမ်းများ ရှိသည်-

ဥပမာ

$locationထိန်းချုပ်ကိရိယာတွင် ဝန်ဆောင်မှုကို အသုံးပြုပါ -

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$locationဝန်ဆောင်မှုကို အငြင်းအခုံအဖြစ် ထိန်းချုပ်ကိရိယာသို့ ပေးပို့ ထားကြောင်း သတိပြုပါ ။ ထိန်းချုပ်ကိရိယာရှိ ဝန်ဆောင်မှုကို အသုံးပြုရန်အတွက် ၎င်းကို မှီခိုမှုတစ်ခုအဖြစ် သတ်မှတ်ရမည်ဖြစ်သည်။


ဝန်ဆောင်မှုများကို ဘာကြောင့် သုံးတာလဲ။

ဝန်ဆောင်မှုများကဲ့သို့ ဝန်ဆောင်မှုများစွာအတွက်၊ သင်သည် အရာဝတ္ထု $locationကဲ့သို့ DOM တွင် ရှိနှင့်ပြီးသား အရာများကို သင်အသုံးပြုနိုင်ပုံရသည် window.location ၊ သို့သော် သင့် AngularJS အပလီကေးရှင်းအတွက် ကန့်သတ်ချက်အချို့ရှိမည်ဖြစ်သည်။

AngularJS သည် သင့်အပလီကေးရှင်းကို အဆက်မပြတ်ကြီးကြပ်နေပြီး ၎င်းသည် အပြောင်းအလဲများနှင့် ဖြစ်ရပ်များကို ကောင်းစွာကိုင်တွယ်ရန်အတွက် AngularJS သည် အရာဝတ္ထု $location အစား သင်အသုံးပြုသည့်ဝန်ဆောင်မှုကို ပိုနှစ်သက်ပါသည်။window.location


$http ဝန်ဆောင်မှု

ဝန်ဆောင်မှုသည် AngularJS အ $httpပလီကေးရှင်းများတွင် အသုံးအများဆုံးဝန်ဆောင်မှုများထဲမှတစ်ခုဖြစ်သည်။ ဝန်ဆောင်မှုသည် ဆာဗာထံ တောင်းဆိုချက်တစ်ခု ပြုလုပ်ပြီး သင့်အက်ပ်လီကေးရှင်းမှ တုံ့ပြန်မှုကို ဆောင်ရွက်ပေးပါသည်။

ဥပမာ

$httpဆာဗာမှ ဒေတာတောင်းခံရန် ဝန်ဆောင်မှုကို အသုံးပြုပါ -

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
    $scope.myWelcome = response.data;
  });
});

$httpဤဥပမာသည် ဝန်ဆောင်မှု ၏ အလွန်ရိုးရှင်းသောအသုံးပြုမှုကို သရုပ်ပြသည် ။ AngularJS Http Tutorial$http တွင် ဝန်ဆောင်မှု အကြောင်း ပိုမိုလေ့လာပါ



$timeout ဝန်ဆောင်မှု

$timeoutဝန်ဆောင်မှုသည် လုပ်ဆောင်ချက်၏ AngularJS ဗားရှင်း ဖြစ်သည် window.setTimeout

ဥပမာ

နှစ်စက္ကန့်အကြာတွင် မက်ဆေ့ခ်ျအသစ်ကို ပြသပါ-

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
    $scope.myHeader = "How are you today?";
  }, 2000);
});

$interval ဝန်ဆောင်မှု

$intervalဝန်ဆောင်မှုသည် လုပ်ဆောင်ချက်၏ AngularJS ဗားရှင်း ဖြစ်သည် window.setInterval

ဥပမာ

စက္ကန့်တိုင်း အချိန်ကို ပြသပါ

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});

သင်၏ကိုယ်ပိုင်ဝန်ဆောင်မှုကိုဖန်တီးပါ။

သင့်ကိုယ်ပိုင်ဝန်ဆောင်မှုကို ဖန်တီးရန် သင့်ဝန်ဆောင်မှုကို မော်ဂျူးသို့ ချိတ်ဆက်ပါ-

အမည်ရှိ ဝန်ဆောင်မှုတစ်ခု ဖန်တီးပါ hexafy-

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

သင့်စိတ်ကြိုက်ပြုလုပ်ထားသော ဝန်ဆောင်မှုကို အသုံးပြုရန်၊ ထိန်းချုပ်ကိရိယာကို သတ်မှတ်သည့်အခါ ၎င်းကို မှီခိုမှုတစ်ခုအဖြစ် ထည့်ပါ-

ဥပမာ

hexafyနံပါတ်တစ်ခုကို ဆဋ္ဌမကိန်းဂဏန်းအဖြစ်သို့ ပြောင်းလဲရန် စိတ်ကြိုက်ပြုလုပ်ထားသော ဝန်ဆောင်မှုကို အသုံးပြု ပါ-

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

စစ်ထုတ်မှုအတွင်း စိတ်ကြိုက်ဝန်ဆောင်မှုကို အသုံးပြုပါ။

ဝန်ဆောင်မှုတစ်ခုကို ဖန်တီးပြီး သင့်အက်ပ်လီကေးရှင်းသို့ ချိတ်ဆက်ပြီးသည်နှင့် မည်သည့် ထိန်းချုပ်ကိရိယာ၊ ညွှန်ကြားချက်၊ စစ်ထုတ်ခြင်း သို့မဟုတ် အခြားဝန်ဆောင်မှုများအတွင်း၌ပင် ဝန်ဆောင်မှုကို သင်အသုံးပြုနိုင်ပါသည်။

စစ်ထုတ်မှုအတွင်း ဝန်ဆောင်မှုကို အသုံးပြုရန်၊ စစ်ထုတ်မှုကို သတ်မှတ်ရာတွင် မှီခိုမှုတစ်ခုအဖြစ် ထည့်ပါ-

hexafyfilter တွင် myFormatအသုံးပြုသော ဝန်ဆောင်မှု

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);

အရာဝတ္ထုတစ်ခုမှ တန်ဖိုးများကို ပြသသည့်အခါ သို့မဟုတ် array တစ်ခုမှ စစ်ထုတ်မှုကို သင်အသုံးပြုနိုင်သည်-

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>