Servicios de AngularJS
En AngularJS puede crear su propio servicio o usar uno de los muchos servicios integrados.
¿Qué es un servicio?
En AngularJS, un servicio es una función u objeto que está disponible y limitado a su aplicación AngularJS.
AngularJS tiene alrededor de 30 servicios integrados. Uno de ellos es el $location
servicio.
El $locationservicio tiene métodos que devuelven información sobre la ubicación de la página web actual:
Ejemplo
Utilice el $locationservicio en un controlador:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Tenga en cuenta que el $locationservicio se pasa al controlador como un argumento. Para utilizar el servicio en el controlador, debe definirse como una dependencia.
¿Por qué utilizar Servicios?
Para muchos servicios, como el $locationservicio, parece que podría usar objetos que ya están en el DOM, como el window.location
objeto, y podría, pero tendría algunas limitaciones, al menos para su aplicación AngularJS.
AngularJS supervisa constantemente su aplicación y, para que maneje los cambios y eventos correctamente, AngularJS prefiere que use el $location
servicio en lugar del window.locationobjeto.
El servicio $http
El $httpservicio es uno de los servicios más utilizados en las aplicaciones AngularJS. El servicio realiza una solicitud al servidor y permite que su aplicación maneje la respuesta.
Ejemplo
Utilice el $httpservicio para solicitar datos del servidor:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Este ejemplo demuestra un uso muy simple del $httpservicio. Obtenga más información sobre el $httpservicio en el Tutorial Http de AngularJS .
El servicio de $tiempo de espera
El $timeoutservicio es la versión de AngularJS de la
window.setTimeoutfunción.
Ejemplo
Mostrar un nuevo mensaje después de dos segundos:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
El servicio de $intervalo
El $intervalservicio es la versión de AngularJS de la
window.setIntervalfunción.
Ejemplo
Mostrar el tiempo 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);
});
Crea tu propio servicio
Para crear su propio servicio, conecte su servicio al módulo:
Crear un servicio llamado hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Para usar su servicio personalizado, agréguelo como una dependencia al definir el controlador:
Ejemplo
Utilice el servicio personalizado named hexafypara convertir un número en un número hexadecimal:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Usar un servicio personalizado dentro de un filtro
Una vez que haya creado un servicio y lo haya conectado a su aplicación, puede usarlo en cualquier controlador, directiva, filtro o incluso dentro de otros servicios.
Para usar el servicio dentro de un filtro, agréguelo como una dependencia al definir el filtro:
El servicio hexafyutilizado en el filtro myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Puede usar el filtro al mostrar valores de un objeto o una matriz:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>