Este documento explica los filtros y servicios en AngularJS. Los filtros permiten dar formato a los valores de expresiones para mostrarlos al usuario. Existen filtros predefinidos pero también se pueden crear filtros personalizados. Los servicios son objetos inyectables para organizar y compartir código entre componentes de una aplicación. Se definen servicios personalizados registrándolos en un módulo.

1. AngularJS
Filtros y servicios
Álvaro Alonso

2. Contenidos
 Filtros
 Servicios
2

3. Filtros
 Dan formato al valor de una expresión para mostrarla al usuario
 Pueden utilizarse en
 Templates
 Controladores
 Servicios
 Directivas
 Existe una colección de filtros predefinidos en Angular
 https://docs.angularjs.org/api/ng/filter
 Pero se pueden definir filtros personalizados
3

4. Filtros
 En Templates
 Filtros en cadena
 Filtros con argumentos
 Se ejecutan únicamente cuando cambia el valor de entrada
 Excepto cuando se aplican sobre Objects
 o cuando se trata de filtros personalizados de tipo $stateful
4
{{ expression | filter }}
{{ expression | filter1 | filter2 | ... }}
{{ expression | filter:argument1:argument2:... }}

5. Filtros
 En controladores, servicios y directivas
 Hay que inyectar una dependencia con el nombre {filterName}Filter
 Se trata de una función
 Primer parámetro: valor a formatear
 Segundo y siguientes: parámetros del filtro
5
{filterName}Filter = function(valueToFormat, filterParam1, filterParam2, …)

6. EJEMPLO
Filtros
6

7. EJERCICIO
Filtros
7
 Utilizar en la aplicación el filtro date para formatear la fecha de nacimiento del
paciente
 Debe utilizarse en el template HTML
 En el informe generado por printInform usar el fintro Uppercase para mostrar
el nombre del paciente en mayúsculas
 Debe utilizarse en el controlador

8. Servicios
 Objetos inyectables para organizar y compartir el código de una app.
 Lazily instantiated: no se instancian hasta que un componente depende
de ellos.
 Singletons: cada componente que depende de un servicio obtiene una
referencia a una instancia diferente.
 Existen servicios predefinidos en Angular
 Empiezan por $ (ej. $http)
 https://docs.angularjs.org/api/ng/service
 Pueden definirse servicios personalizados
8

9. Servicios
 Para usar un servicio ha de inyectarse como dependencia del componente
 Controlador, servicio, filtro o directiva
9
angular.module('myServiceModule', []).
controller('MyController', ['$scope', '$http', function($scope, $http) {
$http(
….
);
}])

10. Servicios
 Para crear un servicio personalizado hay que registrarlo en un módulo
 Un servicio puede tener sus propias dependencias
10
angular.module('myModule', [])
.factory(’myService', function() {
return {
myServiceMethod: function () {…}
}
});
angular.module('myModule', [])
.factory(’myService', [‘$log’, function($log) {
return {
myServiceMethod: function () {…}
}
}]);

11. Servicios
11

12. EJEMPLO
Servicios
12

13. EJERCICIO
Servicios
13
 Modificar la aplicación para que el cálculo del IMC se realice mediante una
función definida en un servicio

14. Documentación
 Filtros
 https://docs.angularjs.org/guide/filter
 Filtros predefinidos
 https://docs.angularjs.org/api/ng/filter
 Servicios
 https://docs.angularjs.org/guide/services
14

15. AngularJS
Filtros y servicios
Álvaro Alonso