$http con Karma y Angular
$http con Karma y Angular

En angularjs tenemos una forma muy sencilla de manejar los eventos que suceden en nuestras aplicaciones gracias a $broadcast, $emit y $on.

Hay dos direcciones para disparar eventos, hacia arriba (to parent) y hacia abajo (to childs). El que dispara hacia arriba es $scope.$emit, emite eventos que pueden ser capturados por los scopes padres, en su defecto, $scope.$broadcast o $rootScope.$broadcast emite eventos a todos los scopes hijos.

Los eventos son muy útiles para notificar a cierta parte de la aplicación (o toda) sobre algún suceso, por ejemplo para procesos de login, logout, permisos y demás.

En este tutorial simplemente vamos a ver cómo lanzar eventos con $emit y $broadcast y de que forma podemos capturarlos con $scope.$on.

Nosotros tendremos cuatro controladores, el appCtrl, que será el padre del resto, y el homeCtrl,profileCtrl que serán los hijos.

Tendremos una variable de alcance ($scope) llamada count, y se actualizará a través de eventos. Nosotros tendremos dos eventos, to_parent y to_childrens, cuando ejecutemos to_childrens a través de $broadcast los controladores hijos escucharán dicho evento y el $scope count se actualizará, pero sólo para ellos (los hijos), no para el controlador padre (appCtrl), lo contrario pasará cuando se ejecute el evento to_parent a través de $emit, el único $scope que será actualizado será el del controlador appCtrl.

Así explicado puede sonar algo complejo, pero realmente no lo es, veamos la estructura html donde tenemos nuestros controladores.


Si te fijas, tenemos tres controladores, el padre que es appCtrl y los hijos que son homeCtrl y profileCtr, de la misma forma podemos observar cómo la variable de alcance count se imprime en distintas zonas de la aplicación, esa es la gracia de $broadcast y $emit en angularjs, tienen la capacidad de trabajar con $scopes en distintas direcciones.

Para que esto termine de quedar claro, crea tu archivo app.js y añade el siguiente código.


El código anterior no es lo más organizado ni mejor que podemos hacer pero para el ejemplo sirve. Si nos fijamos, en los controladores hijos utilizamos $emit y en el controlador padre escuchamos ($scope.$on) el evento lanzado con $emit to_parent, y lo mismo a la inversa, desde el controlador padre utilizamos $broadcast y en los hijos escuchamos el evento to_childrens.

Debemos tener claro que tanto $scope.$emit como $scope.$broadcast aceptan dos argumentos, el nombre del evento y la data.

Si ahora vas a la vista y pulsas en los botones de los controladores hijos verás que sólo se actualiza el scope del controlador padre, y si pulsas en el botón del controlador padre se actualizará únicamente el scope de los controladores hijos.

De esta forma podemos empezar a trabajar con eventos en angularjs.

Este ejemplo no será lo más útil que podamos crear pero seguro que nos ayuda cuando creemos nuestras aplicaciones con angularjs.