Servicios de AngularJS
- Página anterior Filtros de AngularJS
- Página siguiente Http de AngularJS
En AngularJS, puede crear sus propios servicios o usar uno de los muchos servicios integrados.
¿Qué es un servicio?
En AngularJS, los servicios son funciones o objetos que se pueden usar y están limitados solo a su aplicación AngularJS.
AngularJS tiene aproximadamente 30 servicios integrados. Uno de ellos es $location
Servicio.
$location
El servicio tiene métodos que pueden devolver información sobre la ubicación actual de la página web:
Ejemplo
Uso del servicio $location en el controlador:
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); });
Tenga en cuenta que$location
Los servicios se pasan como parámetros a los controladores. Para usar el servicio en el controlador, debe definirse como dependencia.
¿Por qué usar servicios?
Para muchos servicios, como $location
Servicios, parece que puede usar objetos ya existentes en el DOM (por ejemplo Objeto window.location),pero tiene algunas limitaciones, al menos para su aplicación AngularJS.
AngularJS supervisa continuamente su aplicación, prefiriendo que utilice $location
Servicio en lugar del objeto window.location.
Servicio $http
Este ejemplo demuestra
El servicio es uno de los servicios más utilizados en aplicaciones AngularJS. El servicio envía solicitudes al servidor y permite que su aplicación maneje las respuestas.
Ejemplo
Solicitando datos del servidor utilizando el servicio $http:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { }); });
$scope.myWelcome = response.data; Este ejemplo demuestra
$http
Uso muy simple del servicio $timeout. Para obtener más información sobre el servicio $http, consulte el tutorial de AngularJS Http.
$timeout
El servicio es la versión de AngularJS de window.setTimeout
función.
Ejemplo
Mostrar un nuevo mensaje después de dos segundos:
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); });
Servicio $interval
$interval
El servicio es la versión de AngularJS de window.setInterval
función.
Ejemplo
Mostrar la hora cada segundo:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); });
Crear su propio servicio
Para crear su propio servicio, conecte el servicio con el módulo:
Crear un nombre hexafy
servicio:
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } });
Para usar su servicio personalizado, agreguelo como dependencia al definir el controlador:
Ejemplo
Utilice un servicio personalizado llamado hexafy para convertir números en números hexadecimales:
app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); });
Uso de servicios personalizados en filtros
Después de crear el servicio y conectarlo a su aplicación, puede usar este servicio en cualquier controlador, directiva, filtro o incluso otros servicios.
Para usar un servicio en un filtro, agréguelo como dependencia al definir el filtro:
El servicio hexafy utilizado en el filtro myFormat:
app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; });
Puede usar este filtro al mostrar valores en objetos o arrays:
<ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul>
- Página anterior Filtros de AngularJS
- Página siguiente Http de AngularJS