AngularJS tjänster

I AngularJS kan du skapa egna tjänster eller använda en av de många inbyggda tjänsterna.

Vad är en tjänst?

I AngularJS är tjänster funktioner eller objekt som kan användas och är begränsade till din AngularJS-applikation.

AngularJS har ungefär 30 inbyggda tjänster. En av dessa är $location tjänsten.

$location Tjänsten har metoder som returnerar information om den aktuella webbplatsens position:

Exempel

Använd $location-tjänsten i kontrollern:

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

Prova själv

Observera att$location Tjänster överförs som parameter till kontrollern. För att använda tjänsten i kontrollern måste den definieras som en beroende.

Varför använda tjänster?

För många tjänster, som $location tjänsten, du verkar kunna använda objekt som redan finns i DOM (t.ex. window.location-objektet），men det finns några begränsningar, åtminstone för din AngularJS-applikation.

AngularJS övervakar ständigt din applikation för att säkerställa att den hanterar förändringar och händelser korrekt, och AngularJS föredrar att du använder $location tjänsten istället för window.location-objektet.

$http-tjänsten

$http Tjänsten är en av de mest använda tjänsterna i AngularJS-applikationer. Tjänsten skickar förfrågningar till servern och låter din applikation hantera svaren.

Exempel

Använd $http-tjänsten för att hämta data från servern:

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

Prova själv

Detta exempel visar $http En mycket enkel användning av tjänsten. Läs mer om $http-tjänsten i AngularJS Http-utbildningen.

$timeout-tjänsten

$timeout Tjänsten är AngularJS-versionen av window.setTimeout funktionen.

Exempel

Visa ett nytt meddelande efter två sekunder:

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

Prova själv

$interval-tjänsten

$interval Tjänsten är AngularJS-versionen av window.setInterval funktionen.

Exempel

Visa tid varje sekund:

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

Prova själv

Skapa din egen tjänst

För att skapa din egen tjänst, koppla tjänsten till modulen:

Skapa en tjänst med namnet hexafy tjänsten:

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

För att använda din egna tjänst, lägg till den som en beroende när du definierar kontrollern:

Exempel

Använd en anpassad tjänst med namnet hexafy för att konvertera ett nummer till ett hexadecimalt nummer:

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

Prova själv

Använda anpassade tjänster i filter

Skapa en tjänst och anslut den till din applikation efter det, kan du använda denna tjänst i alla kontroller, instruktioner, filter eller till och med andra tjänster.

För att använda en tjänst i en filter, lägg till den som en avhängighet när du definierar filtern:

Tjänsten hexafy som används i filtern myFormat:

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

Prova själv

Du kan använda denna filter när du visar värden i objekt eller arrayer:

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

Prova själv