Latest web development tutorials

AngularJS Service (Service)

AngularJS Sie können Ihren eigenen Dienst, oder verwenden Sie den integrierten Service erstellen.

Was ist ein Service?

In AngularJS, der Service ist eine Funktion oder ein Objekt in Ihrem AngularJS Anwendung verwendet werden.

AngularJS gebaut mehr als 30 Dienste.

Es ist ein$ Ort - Service, der die URL - Adresse der aktuellen Seite zurück.

Beispiele

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

Versuchen »

Beachten Sie, dass$ location Service als Parameter an die Steuerung übergeben wird.Wenn Sie es verwenden möchten, müssen Sie in der Steuerung festgelegt werden.

Warum den Service nutzen?

$ Http AngularJS Anwendung ist die am häufigsten verwendeten Dienste.Der Dienst sendet eine Anfrage an den Server, den Anwendungsserver Antwortdaten übertragen aus.

AngularJS überwacht ständig Anwendung, behandeln Ereignisse zu ändern, verwenden AngularJS$ Standort dienen besser als window.location verwenden.

$ Http Service

$ Http AngularJS Anwendung ist die am häufigsten verwendeten Dienste.Der Dienst sendet eine Anfrage an den Server, den Anwendungsserver Antwortdaten übertragen aus.

Beispiele

Verwenden$ http Dienstanforderungsdaten an den Server:

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

Versuchen »

Das oben genannte ist eine sehr einfache$ http Service - Instanz, mehr $ http- Service - Anwendungen finden Sie unter AngularJS Http - Tutorial .

$ Timeout-Service

AngularJS $ timeout und Dienstleistungen für die JSwindow.setTimeout Funktion entspricht.

Beispiele

Informationen angezeigt 2 Sekunden:

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ scope, $ timeout) {
$ Scope.myHeader = "Hallo Welt!" ;
$ Timeout (function () {
$ Scope.myHeader = "Wie geht es dir heute ?";
}, 2000);
});

Versuchen »

$ Intervall-Service

AngularJS $ Intervall auf die JSwindow.setInterval Servicefunktion entspricht.

Beispiele

Alle zwei Sekunden Informationen angezeigt werden:

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

Versuchen »

Erstellen eines benutzerdefinierten Dienstes

Sie können einen benutzerdefinierten Service-Zugang zu erstellen, Links zu Ihrem Modul:

Erstellen Sie Zugang namenshexafy von:

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

Um den benutzerdefinierten Dienst zuzugreifen, müssen Sie den Filter, wenn das Add Standalone zu definieren:

Beispiele

Verwenden Sie einen benutzerdefinierten Dienst einen Digital - Wandler hexadezimale Zahlenhexafy:

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

Versuchen »

Filter mit benutzerdefinierten Service

Wenn Sie einen benutzerdefinierten Dienst erstellen und zu Ihrer Anwendung verbinden, können Sie es in den Controller, Richtlinien, Filter verwenden oder andere Dienstleistungen.

Hexafy nutzen den Service im Filter myFormatin:

app.filter ( 'myFormat' [ ' hexafy', function (hexafy) {
Return - Funktion (x) {
Rückkehr hexafy .myFunc (x);
};
}]);

Versuchen »

Erste Wert in einer Reihe von Objekten, die Sie Filter verwenden können:

Erstellen von Diensthexafy:

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

Versuchen »