AngularJS Service (Service)
In AngularJS können Sie Ihre eigenen Dienste erstellen oder integrierte Dienste nutzen.
Was ist Service?
In AngularJS ist ein Dienst eine Funktion oder ein Objekt, das in Ihrer AngularJS -Anwendung verwendet werden kann.
AngularJS verfügt über mehr als 30 integrierte Dienste.
Es gibt einen $ -Port -Service, der die URL -Adresse der aktuellen Seite zurückgeben kann.
Beispiel
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Die aktuelle Seiten-URL: </p> <h3> {{myurl}} </h3> </div> <p> Diese Instanz verwendet den integrierten $ -Port-Service, um die URL der aktuellen Seite zu erhalten. </p> <script> var app = angular.module ('myApp', []); App.Controller ('myctrl', Funktion ($ scope, $ location) {$ scope.myurl = $ location.absurl ();});Auslaufergebnisse:
Die URL der aktuellen Seite:
http://www.runoob.com/try/try.php?filename=try_ng_services
In dieser Instanz wird der integrierte $ -Port-Service verwendet, um die URL der aktuellen Seite zu erhalten.
HINWEIS: Der $ -Port -Service wird als Parameter in den Controller übergeben. Wenn Sie es verwenden möchten, müssen Sie es im Controller definieren.
Warum den Service nutzen?
$ http ist der am häufigsten verwendete Service in AngularJS -Anwendungen. Der Dienst sendet eine Anfrage an den Server, und die Anwendung reagiert auf die vom Server übertragenen Daten.
AngularJs überwacht immer Anwendungen und verarbeitet Ereignisänderungen. AngularJS verwendet den $ -Position -Dienst besser als das Fenster.Location -Objekt.
$ http Service
$ http ist der am häufigsten verwendete Service in AngularJS -Anwendungen. Der Dienst sendet eine Anfrage an den Server, und die Anwendung reagiert auf die vom Server übertragenen Daten.
Beispiel
Verwenden Sie den $ HTTP -Dienst, um Daten vom Server anzufordern:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <p> Willkommen: </p> <> {{myWelcome}} <> </div> <p> Der $ http -Dienst fordert Informationen vom Server an, und der zurückgegebene Wert wird in die Variable "myWelcome" aufgenommen. </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope, $ http) {$ http.get ("willkommen.htm"). Dann (Funktion (Antwort) {$ scope.mywelcome = response.data;};Auslaufergebnisse:
Willkommensnachricht:
Willkommen zu Besuch
Der $ HTTP -Service fordert Informationen vom Server an und der zurückgegebene Wert wird in die Variable "MyWelcome" platziert.
Das obige ist eine sehr einfache HTTP -Serviceinstanz. Weitere $ HTTP -Service -Anwendungen finden Sie im AngularJS HTTP -Tutorial.
$ Timeout -Service
Der AngularJS $ Timeout -Service entspricht dem JS -Fenster. Settimeout -Funktion.
Beispiel
Die Informationen werden in zwei Sekunden angezeigt:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <p> Die Informationen werden nach zwei Sekunden angezeigt: </p> <h1> {{Myheader}} </h1> </div> $ Timeout Access führt die angegebene Funktion nach der angegebenen Anzahl von Millisekunden aus. </p> <script> var app = angular.module ('MyApp', []); App.Controller ('myctrl', Funktion ($ scope, $ timeout) {$ scope.myheader = "Hallo Welt!"; 2000);}); </script> </body> </html>Auslaufergebnisse:
Die Informationen werden in zwei Sekunden angezeigt:
Wie geht es dir heute?
$ timeout Access führt die angegebene Funktion nach der angegebenen Anzahl von Millisekunden aus.
$ Intervalldienst
Der AngularJS $ Interval -Service entspricht dem JS -Fenster. SetInterval -Funktion.
Beispiel
Zeigen Sie Informationen alle zwei Sekunden an:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <p> Die aktuelle Zeit lautet: </p> <h1> {{thetime}} </h1> </div> <p> $ Intervallzugriff nennt eine Funktion oder berechnet einen Ausdruck in einem bestimmten Zeitraum (in Millisekunden). </p> <script> var app = angular.module ('MyApp', []); App.Controller ('myctrl', Funktion ($ scope, $ intervall) {$ scope.thetime = new Date (). Tolocaletimestring (); 1000);}); </script> </body> </html>Laufeffekt:
Jetzt ist die Zeit:
15:41:09 Uhr
$ Intervallzugriff ruft eine Funktion oder eine Anzahl in einem bestimmten Zeitraum auf (in Millisekunden)
Erstellen Sie einen benutzerdefinierten Dienst
Sie können benutzerdefinierte Zugriffe auf diesen Link zu Ihrem Modul erstellen:
Erstellen Sie einen Zugriff namens Hexafy:
app.Service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}});Um benutzerdefinierten Zugriff zu verwenden, müssen Sie ihn beim Definieren des Filters unabhängig hinzufügen:
Beispiel
Verwenden Sie die Hexafy für benutzerdefinierte Service, um eine Nummer in eine Hexafie umzuwandeln:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> 255's Hexagram ist: </p> <h1> {{hex}} </h1> </div> <p> benutzerdefinierte Dienst, verwendet zur Konvertierung von Hexagram-Nummern: </p> <Script> var App = Angular.module ('MyApp', []; {this.myfunc = function (x) {return X.toString (16);Auslaufergebnisse:
Das Hexadezimalsystem von 255 lautet:
ff
Benutzerdefinierte Service zum Konvertieren von Hexadezimalnummern:
Verwenden Sie im Filter benutzerdefinierte Dienste
Wenn Sie einen benutzerdefinierten Dienst erstellen und eine Verbindung zu Ihrer App herstellen, können Sie ihn in Controllern, Richtlinien, Filtern oder anderen Diensten verwenden.
Verwenden Sie die Service -Hexafy im Filter myFormat:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min Filter: <h1> {{255 | myFormat}} </h1> </div> <skript> var app = angular.module ('myapp', []); App.Service ('hexafy', function () {this.myfunc = function (x) {return X.toString (16);}}); Funktion (x) {hexafy.MyFunc (x);};}]); </script> </body> </html>Laufeffekt:
Nutzen Sie Dienste in Filtern:
ff
Wenn Sie Werte in einer Reihe von Objekten erhalten, können Sie Filter verwenden:
Erstellen Sie eine Service -Hexafy:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Verwenden Sie Filter beim Abrufen von Array [255, 251, 200] Werte: </p> <ul> <li ng-repeat = "x in zählenden"> {{{x | MyFormat}} </li> </ul> <p> Filter verwendet einen Dienst, um Dezimalzahl in Hexadezimal umzuwandeln. </p> </div> <script> var app = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16); hexafy.myfunc (x);Laufeffekt:
Verwenden Sie Filter, wenn Sie Array -Werte erhalten [255, 251, 200]:
Filter nutzen Dienste, um Dezimalal in Hexadezimal umzuwandeln.
Das obige ist eine Zusammenstellung der Informationen zum AngularJS -Dienst. Wir werden es später weiter hinzufügen. Für Freunde in Not finden Sie bitte darauf.