Serviço AngularJS (serviço)
No AngularJS, você pode criar seus próprios serviços ou usar serviços internos.
O que é serviço?
No AngularJS, um serviço é uma função ou objeto que pode ser usado no seu aplicativo AngularJS.
AngularJS possui mais de 30 serviços internos.
Existe um serviço de localização $ que pode retornar o endereço da URL da página atual.
Exemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> <p> A página atual URL: </p> <h3> {{myurl}} </h3> </div> <p> Esta instância usa o serviço de localização interno para obter o URL da página atual. </p> <cript> var app = angular.module ('myApp', []); App.Controller ('myctrl', função ($ scope, $ location) {$ scope.myurl = $ location.absurl ();}); </script> </body> </html>Resultados em execução:
O URL da página atual:
http://www.runoob.com/try/try.php?filename=try_ng_services
Esta instância usa o serviço de localização $ interno para obter o URL da página atual.
NOTA: O Serviço de Localização $ é passado como um parâmetro no controlador. Se você deseja usá -lo, precisará defini -lo no controlador.
Por que usar o serviço?
$ http é o serviço mais usado em aplicativos AngularJS. O serviço envia uma solicitação ao servidor e o aplicativo responde aos dados transmitidos pelo servidor.
O AngularJS sempre monitora os aplicativos e lidera alterações de eventos. AngularJS usa o serviço de localização $ melhor do que usar o objeto Window.Location.
Serviço $ HTTP
$ http é o serviço mais usado em aplicativos AngularJS. O serviço envia uma solicitação ao servidor e o aplicativo responde aos dados transmitidos pelo servidor.
Exemplo
Use o serviço $ http para solicitar dados do servidor:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> <p> Bem-vindo: </p> <> {{myWelcome}} <> </div> <p> A $ HTTP Service solicita informações do servidor e o valor retornado é colocado na variável "MyWelcome". </p> <cript> var app = angular.module ('myApp', []); App.Controller ('myctrl', função ($ scope, $ http) {$ http.get ("Welcome.htm"). Então (function) {$ scope.mywelccome = resposta;Resultados em execução:
Mensagem de boas -vindas:
Bem -vindo à visita
As $ HTTP Service solicita informações do servidor e o valor retornado é colocado na variável "MyWelcome".
O acima é uma instância de serviço $ HTTP muito simples. Para obter mais aplicativos de serviço $ http, consulte o tutorial do AngularJS HTTP.
$ Serviço de Timeout
O Serviço de Timeout AngularJS $ corresponde à função JS Window.SetTimeout.
Exemplo
As informações serão exibidas em dois segundos:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> <p> A informação é exibida após dois segundos: </p> <h1> {{myheader}} </h1> </div> <p> $ acesso timeout executa a função especificada após o número especificado de milissegundos. </p> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', função ($ scope, $ timeout) {$ scope.myheader = "hello world!"; 2000);}); </script> </body> </html>Resultados em execução:
As informações serão exibidas em dois segundos:
Como você está hoje?
$ Timeout Access executa a função especificada após o número especificado de milissegundos.
$ Serviço de intervalo
O serviço de intervalo angularjs $ corresponde à função JS Window.SetInterval.
Exemplo
Exibir informações a cada dois segundos:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> <p> O horário atual é: </p> <h1> {{thEtime}} </h1> </div> <p> $ acesso intervalo chama uma função ou calcula uma expressão em um período especificado (em milissegundos). </p> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', função ($ scope, $ interval) {$ scope.TheTime = new Date (). Tolocaletimestring (); $ interval (function () {$ scope.TheTime 1000);}); </script> </body> </html>Efeito de corrida:
Agora a hora é:
15:41:09
$ Acesso ao intervalo chama uma função ou contagem em um período especificado (em milissegundos)
Crie um serviço personalizado
Você pode criar acessos personalizados que links para o seu módulo:
Crie um acesso chamado Hexafy:
App.Service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}});Para usar acesso personalizado, você precisa adicioná -lo de forma independente ao definir o filtro:
Exemplo
Use Hexafy de serviço personalizado para converter um número em uma 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> <p> O hexagrama de 255 é: </p> <h1> {{hex}} </h1> </div> <p> Serviço personalizado, usado para converter números hexagrama: </p> <cript> var app = angular.module ('myApp', []; {this.myfunc = function (x) {return x.toString (16);Resultados em execução:
O sistema hexadecimal de 255 é:
ff
Serviço personalizado para converter números hexadecimais:
No filtro, use serviços personalizados
Quando você cria um serviço personalizado e se conecta ao seu aplicativo, você pode usá -lo em controladores, diretrizes, filtros ou outros serviços.
Use o serviço Hexafy no 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> <body> <dbody-kng ng ng ng "</script> </body-bfody <nd> <d. Filtros: <H1> {{255 | myFormat}} </h1> </div> <cript> var app = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}}}); função (x) {return hexafy.myfunc (x);};}]);Efeito de corrida:
Use serviços em filtros:
ff
Ao obter valores em uma variedade de objetos, você pode usar filtros:
Crie uma hexafia de serviço:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> <p> Use filtros ao obter a matriz [255, 251, 200] MyFormat}} </li> </ul> <p> O filtro usa um serviço para converter decimal em hexadecimal. </p> </div> <cript> var app = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}}); hexafy.myfunc (x);};}]);Efeito de corrida:
Use filtros ao obter o Array [255, 251, 200] Valores:
Os filtros usam serviços para converter decimal em hexadecimal.
O exposto acima é uma compilação das informações sobre o Serviço AngularJS. Continuaremos a adicioná -lo mais tarde. Para amigos necessitados, consulte isso.