Hace tiempo, cuando empecé en el mundillo de AngularJS y al ver que en muy poco tiempo podía hacer «muchas» cosas con muy pocas líneas de código me hizo muy feliz, pero esa felicidad no duró mucho al darme cuenta de que lo demás no era tan fácil como parecía.
Para empezar a coger algo de práctica me proponía pequeñas ideitas de web-apps para hacer y así practicar. Recuerdo que lo primero que empecé a hacer fue una aplicación para una biblioteca ficticia en que tenía mis libros, podía caracterizarlos, borrarlos, etiquetarlos, añadir nuevos y algunas que otras tonterías más. El primer problema con el que me topé fue que no conseguía que los datos de un controlador estuvieran en otro controlador, por lo que no conseguía hacer nada hasta que conocí a los queridos servicios de AngularJS.
Los servicios son unos middleware que almacenan y transportan información, a esa información se puede acceder desde cualquier controlador, siendo eso, nuestro conducto de datos.
Creando un nuevo servicio
(function () {
var sharedValues = function ($rootScope) {
var service = {};
service.value = '';
service.prepForBroadcast = function(value){
this.value = value
$rootScope.$broadcast('handleBroadcast')
};
return service;
};
angular.module('myApp').service('sharedValues', sharedValues);
}());
Creamos una variable sharedValues que luego lo usaremos para crear nuestro servicio. Esta variable es una función anónima que recibe como parámetro $rootScope, con el que podemos acceder al nivel más alto de $scope, el $scope padre por así decirlo.
Todos los demás scopes son childs de este. Creamos un objeto llamado service, que es lo que devolveremos en esta función, normalmente un servicio o factoría siempre devuelve un objeto que tiene métodos propios.
Creamos una función prepForBroad al que pasaremos por parametro una variable con un valor, esa variable será el dato que queremos hacer viajar por los demás $scopes.
service.prepForBroadcast = function(value){
this.value = value
$rootScope.$broadcast('handleBroadcast')
};
Una vez tengamos asignado ese valor a una variable, lo haremos viajar con $broadcast, esto lo que hace es propagar esa información con todos los scopes que tenga por debajo, y claro, como se lo estamos haciendo al $rootScope, que es el scope padre, cualquier scope está por debajo de él, por lo que viajará a todos los controladores.
Para crear un broadcast tenemos que darle un nombre para poder escucharlo más tarde desde otro controlador.
Lo contrario a $broadcast es $emit, lo que hace es mandar información desde un controlador inferior, hacia todos los controladores hacía arriba, hasta llegar a la cima.
Una vez terminado con esta función, devolvemos el servicio y ya tenemos nuestra función para el servicio creado, simplemente tenemos que declarar el servicio.
angular.module('myApp').service('sharedValues', sharedValues);
Le tenemos que dar un nombre, y le pasamos la variable de la función que creamos hace un momento, con esto ya tenemos nuestro servicio listo para escuchar y transmitir datos.
Transmitiendo datos
Tenemos que inyectar el servicio que acabamos de crear a nuestro controlador desde el cual queremos enviar un dato.
angular.module('myApp').controller('miControlador', function($scope, sharedValues);
Como podemos ver, sharedValues es el nombre que le dimos anteriormente
Para transmitir un dato simplemente tenemos que llamar la función prepForBroadcast pasandole el valor que queremos enviar.
var variable = 'Quiero que este mensaje se pueda recibir en cualquier controlador'; sharedValues.prepForBroadcast(variable);
Ahora tenemos que ir al controlador donde queramos tener el dato disponible
Escuchando datos
Para recibir el dato usaremos $on indicandole el nombre del transmisor que habíamos inventado hace un momento, que se llama handleBroadcast y asi asignarle el dato a una variable del controlador local.
$scope.$on('handleBroadcast', function(){
$scope.busqueda = sharedValues.value;
});
Con todo esto preparado, ya tenemos nuestro servicio que puede hacer viajar datos a través de controladores, espero que os sirva para vuestros proyectos y ya nos leemos próximamente!
