AngularJS Services

Sa AngularJS, maaari mong lumikha ng sariling serbisyo o gamitin ang isa sa maraming nakalipas na serbisyo.

Ano ang serbisyo?

Sa AngularJS, ang serbisyo ay function o object na maaaring gamitin at limitado lamang sa iyong AngularJS na aplikasyon.

Mayroong humigit-kumulang 30 na nakalipas na serbisyo ang AngularJS. Isa sa mga ito ay $location Serbisyo.

$location Ang serbisyo ay may mga paraan na makakapagbibigay ng impormasyon tungkol sa kasalukuyang posisyon ng pahina:

Mga halimbawa

Ginagamit ang $location na serbisyo sa controller:

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

Try It Yourself

Pansin mo na,$location Ang serbisyo ay ipinapakita bilang argumento sa controller. Upang gamitin ang serbisyo sa controller, dapat itong ipangalan bilang pag-iipon ng kailangan.

Bakit gamitin ang serbisyo?

Para sa maraming serbisyo, tulad ng $location Serbisyo, mukhang maaari mong gamitin ang mga naka-eksistensyang objekto sa DOM (halimbawa object na window.location），ngunit mayroon ding mga limitasyon, kahit para sa iyong AngularJS na aplikasyon.

Patuloy na pinagmasdan ng AngularJS ang iyong aplikasyon, upang ito ay maayos na hawakan ang mga pagbabago at mga kaganapan, ang AngularJS ay mas pabor sa paggamit ng iyong $location sa halip ng object na window.location.

$http na serbisyo

Ang halimbawa na ito ay nagpapakita ng Ang serbisyo ay isa sa pinaka-komun na serbisyo sa AngularJS na aplikasyon. Ang serbisyo ay nagpadala ng kahilingan sa server at pinapapatakbo ng iyong aplikasyon ang tugon.

Mga halimbawa

Ginagamit ang $http na serbisyo upang humingi ng datos mula sa server:

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

Try It Yourself

$scope.myWelcome = response.data; Ang halimbawa na ito ay nagpapakita ng $http

Ang paggamit ng serbisyo ng $timeout ay napakasimpleng: Maaari mong malaman mas marami tungkol sa serbisyo ng $http sa tutorial ng AngularJS Http.

$timeout Ang serbisyo ay ang bersyon ng AngularJS ng window.setTimeout Function.

Mga halimbawa

Ipakita ang bagong mensahe pagkatapos ng dalawang segundo:

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

Try It Yourself

Ang serbisyo ng $interval

$interval Ang serbisyo ay ang bersyon ng AngularJS ng window.setInterval Function.

Mga halimbawa

Ipakita ang oras bawat sandali:

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

Try It Yourself

Lumikha ng iyong sariling serbisyo

Para lumikha ng iyong sariling serbisyo, kumuha ng serbisyo at magkakabit sa modulo:

Tumuklas ng pangalanan na hexafy ng serbisyo:

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

Para gamitin ang iyong sariling serbisyo, idagdag ito bilang depensya sa paglilikha ng controller:

Mga halimbawa

Ginagamit ang sariling serbisyo na pinangalanan hexafy upang i-convert ang numero sa bilang sa labingwalong heksadecimal:

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

Try It Yourself

Custom Service in Filter

Pagkatapos nilikha ang serbisyo at nakasama ito sa iyong application, maaari mong gamitin ang serbisyo sa anumang controller, directive, filter, o kahit sa ibang serbisyo.

Para gamitin ang serbisyo sa filter, idagdag ito bilang isang pag-aaliw kapag tinatawag ang filter:

Ang serbisyo na ginamit ng filter myFormat: hexafy

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

Try It Yourself

Maaari mong gamitin ang filter na ito kapag ipinapakita ang halaga ng isang bagay o array:

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

Try It Yourself