AngularJS service

I AngularJS kan du oprette dine egne tjenester eller bruge en af de mange indbyggede tjenester.

Hvad er en tjeneste?

I AngularJS er tjenester funktioner eller objekter, der kan bruges og kun bruges i din AngularJS-applikation.

AngularJS har omkring 30 indbyggede tjenester. En af dem er $location tjenesten.

$location Tjenesten har metoder, der kan returnere oplysninger om den aktuelle websides placering:

Eksempel

Brug af $location-tjenesten i kontrolleren:

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

Prøv det selv

Bemærk,$location Tjenester overføres som parametre til kontrolleren. For at bruge tjenesten i kontrolleren, skal den defineres som en afhængighed.

Hvorfor bruge tjenester?

For mange tjenester som $location tjenesten, hvor du kan bruge objekter, der allerede findes i DOM'en (f.eks. window.location-objektet），men det vil være nogle begrænsninger, mindst for din AngularJS-applikation.

AngularJS overvåger konstant din applikation, og for at sikre, at den håndterer ændringer og begivenheder korrekt, foretrækker AngularJS, at du bruger $location tjenesten i stedet for window.location-objektet.

$http-tjenesten

$http Tjenesten er en af de mest almindelige tjenester i AngularJS-applikationer. Tjenesten sender anmodninger til serveren og lader din applikation håndtere svarene.

Eksempel

Brug $http-tjenesten til at anmode om data fra serveren:

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

Prøv det selv

Dette eksempel viser $http er meget simpel at bruge. Læs mere om $http tjenesten i AngularJS Http vejledning.

$timeout tjenesten

$timeout tjenesten er AngularJS versionen af window.setTimeout funktion.

Eksempel

Vis nyt besked efter to 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);
});

Prøv det selv

$interval tjenesten

$interval tjenesten er AngularJS versionen af window.setInterval funktion.

Eksempel

Vis klokkeslæt hvert 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);
});

Prøv det selv

Opret din egen tjeneste

For at oprette din egen tjeneste skal du tilknytte tjenesten til modulet:

Opret en tjeneste ved navn hexafy tjenesten:

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

For at bruge din brugerdefinerede service skal du tilføje den som en afhængighed i definitionen af din controller:

Eksempel

Brug af en brugerdefineret service ved navn hexafy til at konvertere et tal til et hexadecimal tal:

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

Prøv det selv

Brug af brugerdefinerede tjenester i filtre

Efter at have oprettet tjenesten og forbundet den til din applikation kan du bruge denne tjeneste i ethvert controller, anvisning, filter eller endda andre tjenester.

For at bruge tjenester i filter skal du tilføje dem som afhængigheder ved definitionen af filteret:

Tjenesten hexafy brugt i filteret myFormat:

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

Prøv det selv

Du kan bruge denne filter til at vise værdier i objekter eller arrayer:

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

Prøv det selv