Servicio AngularJS (servicio)
En AngularJS puede crear sus propios servicios o utilizar servicios incorporados.
¿Qué es el servicio?
En AngularJS, un servicio es una función u objeto que se puede usar en su aplicación AngularJS.
AngularJS tiene más de 30 servicios incorporados.
Hay un servicio de ubicación $ que puede devolver la dirección de URL de la página actual.
Ejemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> Ng-Controller = "Myctrl"> <p> La url de la página actual: </p> <h3> {{myurl}} </h3> </div> <p> Esta instancia utiliza el servicio de ubicación $ incorporado para obtener la URL de la página actual. </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ ubicación) {$ scope.myurl = $ ubicación.absurl ();}); </script> </body> </html>Resultados de ejecución:
La URL de la página actual:
http://www.runoob.com/try/try.php?filename=try_ng_services
Esta instancia utiliza el servicio de ubicación $ incorporado para obtener la URL de la página actual.
Nota: El servicio de ubicación $ se pasa como un parámetro en el controlador. Si desea usarlo, debe definirlo en el controlador.
¿Por qué usar el servicio?
$ http es el servicio más utilizado en aplicaciones AngularJS. El servicio envía una solicitud al servidor y la aplicación responde a los datos transmitidos por el servidor.
AngularJS siempre monitoreará las aplicaciones y manejará los cambios en el evento. AngularJS utiliza mejor el servicio de ubicación $ que usar el objeto Window.location.
$ HTTP Servicio
$ http es el servicio más utilizado en aplicaciones AngularJS. El servicio envía una solicitud al servidor y la aplicación responde a los datos transmitidos por el servidor.
Ejemplo
Use el servicio $ HTTP para solicitar datos del servidor:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div-dapp-app = "myapp" ng "ng" ng-contrler " <p> Bienvenido: </p> <> {{mywelcome}} <> </div> <p> El servicio $ HTTP solicita información del servidor, y el valor devuelto se coloca en la variable "mywelcome". </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ http) {$ http.get ("bienvenido.htm"). entonces (function (respuesta) {$ scope.mywelcome = respuesta.data;});}); </script>Resultados de ejecución:
Mensaje de bienvenida:
Bienvenido a visitar
El servicio $ HTTP solicita información del servidor, y el valor devuelto se coloca en la variable "mywelcome".
Lo anterior es una instancia de servicio $ HTTP muy simple. Para obtener más aplicaciones de servicio de $ HTTP, consulte el tutorial AngularJS HTTP.
$ Servicio de tiempo de espera
El servicio AngularJS $ TimeOut corresponde a la función JS.
Ejemplo
La información se mostrará en dos segundos:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div-dapp-app = "myapp" ng "ng" ng-contrler " <p> La información se muestra después de dos segundos: </p> <h1> {{MyHeader}} </h1> </div> <p> $ TIMeout Access ejecuta la función especificada después del número especificado de milisegundos. </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ timeout) {$ scope.myheader = "Hola mundo!"; $ timeOut (function () {$ scope.myheader = "¿Cómo estás hoy?";}, 2000);}); </script> </body> </html>Resultados de ejecución:
La información se mostrará en dos segundos:
¿Cómo estás hoy?
$ TimeOut Access ejecuta la función especificada después del número especificado de milisegundos.
$ Servicio de intervalo
El servicio AngularJS $ Interval corresponde a la función JS Window.SetInterval.
Ejemplo
Mostrar información cada dos segundos:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div-dapp-app = "myapp" ng "ng" ng-contrler " <p> La hora actual es: </p> <h1> {{thetime}} </h1> </div> <p> $ El acceso al intervalo llama a una función o calcula una expresión en un período especificado (en milisegundos). </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ interval) {$ scope.thetime = new date (). TOLOCALETIMECTRING (); $ Interval (function () {$ scope.Thetime 1000);}); </script> </body> </html>Efecto de ejecución:
Ahora el momento es:
3:41:09 PM
$ interval de intervalo llama a una función o cuenta en un período especificado (en milisegundos)
Crear un servicio personalizado
Puede crear accesos personalizados que se vinculen a su módulo:
Cree un acceso llamado Hexafy:
app.service ('hexafy', function () {this.myfunc = function (x) {return x.ToString (16);}});Para usar el acceso personalizado, debe agregarlo de forma independiente al definir el filtro:
Ejemplo
Use el servicio personalizado Hexafy para convertir un número en un hexafy:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <p> 255 El hexagram es: </p> <h1> {{hex}} </h1> </div> <p> Servicio personalizado, utilizado para convertir hexagram números: </p> <script> var = angular.module ('myapp', []); app.service ('hexafy',) {this.myfunc = function (x) {return X.ToString (16);Resultados de ejecución:
El sistema hexadecimal de 255 es:
FF
Servicio personalizado para convertir números hexadecimales:
En el filtro, use servicios personalizados
Cuando crea un servicio personalizado y se conecta a su aplicación, puede usarlo en controladores, directivas, filtros u otros servicios.
Use el servicio Hexafy en el filtro myFormat:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp"> use in servic Filtros: <h1> {{255 | myFormat}} </h1> </div> <script> var app = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.ToString (16);}}}); app.filter ('myFormat', ['Hexafy', function (function (healT) función (x) {return hexafy.myfunc (x);Efecto de ejecución:
Use servicios en filtros:
FF
Al obtener valores en una matriz de objetos, puede usar filtros:
Crear un servicio hexafy:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <p> Use filtros al obtener matriz [255, 251, 200] valores: </p> <ul> <li ng-depreat = "x in Counts"> {{x | myFormat}} </li> </ul> <p> El filtro utiliza un servicio para convertir decimal a hexadecimal. </p> </div> </div> <Script> var app App = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.ToString (16);}}}); app.filter ('myFormat', ['hexafy', function (hexafy) { hexafy.myfunc (x);};}]); app.controller ('myctrl', function ($ scope) {$ scope.counts = [255, 251, 200];}); </script> </body> </html>Efecto de ejecución:
Use filtros al obtener una matriz [255, 251, 200] valores:
Los filtros usan servicios para convertir decimal a hexadecimal.
Lo anterior es una compilación de la información sobre el servicio AngularJS. Continuaremos agregándolo más tarde. Para amigos necesitados, consultelo.