Servicios de AngularJS
On octubre 5, 2021 by adminEn AngularJS puedes hacer tu propio servicio, o utilizar uno de los muchos servicios incorporados.
¿Qué es un servicio?
En AngularJS, un servicio es una función, o un objeto, que está disponible para, y limitado a, tu aplicación AngularJS.
AngularJS tiene alrededor de 30 servicios incorporados. Uno de ellos es el servicio $location.
El servicio $location tiene métodos que devuelven información sobre la ubicación de la página web actual:
Ejemplo
Usa el servicio $location en un controlador:
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Pruébalo tú mismo »
Nota que el servicio $location se pasa al controlador como argumento. Para usar el servicio en el controlador, debe definirse como una dependencia.
¿Por qué usar servicios?
Para muchos servicios, como el servicio $location, parece que podrías usar objetos que ya están en el DOM, como el objeto window.location, y podrías, pero tendría algunas limitaciones, al menos para tu aplicación AngularJS.
AngularJS supervisa constantemente tu aplicación, y para que maneje correctamente los cambios y eventos, AngularJS prefiere que utilices el servicio $location en lugar del objeto window.location.
El servicio $http
El servicio $http es uno de los más utilizados en las aplicaciones AngularJS. El servicio hace una petición al servidor, y deja que tu aplicación maneje la respuesta.
Ejemplo
Usa el servicio $http para pedir datos al servidor:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(«welcome.htm»).then(function (response) {
$scope.myWelcome = response.data;
});
Pruébalo tú mismo »
Este ejemplo demuestra un uso muy sencillo del servicio $http. Aprende más sobre el servicio $http en el Tutorial Http de AngularJS.
El servicio $timeout
El servicio $timeout es la versión de AngularJS de la función window.setTimeout.
Ejemplo
Muestra un nuevo mensaje después de dos segundos:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = «¡Hola mundo!»;
$timeout(function () {
$scope.myHeader = «¿Cómo estás hoy?»;
}, 2000);
Pruébalo tú mismo »
El servicio $interval
El servicio $intervales la versión de AngularJS de la función window.setInterval.
Ejemplo
Mostrar la hora cada segundo:
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
Pruébalo tú mismo »
Crea tu propio servicio
Para crear tu propio servicio, conecta tu servicio al módulo:
Crea un servicio llamado hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
};
Para utilizar tu servicio personalizado, añádelo como dependencia al definir el controlador:
Ejemplo
Usa el servicio personalizado llamado hexafy para convertir un número en hexadecimal:
$scope.hex = hexafy.myFunc(255);
});
Pruébalo tú mismo »
Usa un servicio personalizado dentro de un filtro
Una vez que has creado un servicio, y lo has conectado a tu aplicación, puedes usar el servicio en cualquier controlador, directiva, filtro, o incluso dentro de otros servicios.
Para utilizar el servicio dentro de un filtro, añádelo como dependencia al definir el filtro:
El servicio hexafy utilizado en el filtro myFormat:
Pruébalo tú mismo »
Puedes utilizar el filtro al mostrar valores de un objeto, o un array:
Crea un servicio llamado hexafy:
<li ng-repeat=»x en cuentas»>{{x | miFormato}}</li>
</ul>
Pruébalo tú mismo »
.
Deja una respuesta