Introducción a los eventos de AngularJS
AngularJS puede describirse como un marco de JavaScript utilizado para establecer aplicaciones de página única (SPA) para dispositivos móviles y desarrollo web. El SPA es una sola página donde gran parte del conocimiento sigue siendo similar en apoyo de unos pocos bits de datos que se pueden personalizar al hacer clic en categorías / opciones adicionales. Todo este procedimiento puede aliviar su trabajo simplemente permitiendo el costo, aumentando la eficiencia y cargando la página web más rápido. En este tema, vamos a aprender sobre los eventos de AngularJS.
Al usar AngularJS, puede trabajar con directivas y usar atributos HTML simplemente vinculando datos a HTML con las expresiones. AngularJS puede ser una arquitectura MVC que hace que las aplicaciones web sean fáciles de construir desde el principio. AngularJS 1.0 se lanzó en 2010, y si hablamos hoy; la versión más nueva de AngularJS puede ser 1.7.8 que se lanzó en marzo de 2019. AngularJS es, además, un marco de código abierto administrado simplemente por Google que utiliza una gran comunidad de programadores.
Prerrequisitos
Antes de avanzar a AngularJS, debe tener un conocimiento fundamental de
- JavaScript
- HTML
- CSS
Conceptos básicos de AngularJS
Aquí están los conceptos básicos de AngularJS
Directivas
El prefijo ng significa AngularJS. ng- puede describirse como prefijo reservado para directivas de clave angular. Para evitar colisiones, pueden sugerirle que nunca utilice el prefijo ng exacto en sus directivas más adelante en la versión de Angular. Ng puede ser una abreviatura de Angular.
Instancias de algunas de las directivas en AngularJS
- La directiva ng-new se puede usar para producir una nueva aplicación angular
- La directiva ng-update actualiza sus increíbles aplicaciones y también sus dependencias
- La directiva ng-app se puede usar para inicializar una aplicación AngularJS.
- La directiva ng-init inicializa la información de la aplicación.
La directiva ng-app también explica a AngularJS que el elemento es un "emprendedor" con la aplicación AngularJS.
Expresiones
- Las expresiones a través de AngularJS se describirán dentro de corchetes dobles: expresión.
- Para escribir una expresión dentro de una directiva: ng-bind = ”expresión”.
Por ejemplo
Salida:
Controlador
- La aplicación de AngularJS será controlada simplemente por Controladores.
- El controlador de la aplicación podría describirse con una directiva ng-controller
- Un controlador se conoce como un objeto JS, construido con un constructor de objetos JS regular.
Explicar los eventos de AngularJS
Diferentes tipos de eventos ubicados en AngularJS
AngularJS está increíblemente lleno de eventos e incluye un modelo básico de cómo puede agregar oyentes de eventos al HTML. Facilita muchos eventos asociados con el mouse y el teclado. La mayoría de estos eventos se colocarán en un elemento HTML. En caso de que haya escrito HTML y también, eventos AngularJS simultáneamente, después de que ambos eventos se puedan ejecutar, esto significa que un evento AngularJS nunca sobrescribirá un evento HTML.
Algunos de los eventos esenciales son los siguientes.
- ng-copy
- ng-click
- ng-cut
- ng-dblclick
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-blur
Vamos a analizar es comunicarse con eventos.
Angular JS incluye un bus de eventos global que le permite generar eventos en un ámbito y dejar que otros ámbitos escuchen ese evento y respondan a él. Puede pasar argumentos adicionales con el evento para que otros oyentes puedan responder adecuadamente al evento. Los eventos son bastante sencillos, pero hay algunas trampas para ellos.
En primer lugar, escuchando un evento simplemente llama al método $ on () en un ámbito con un parámetro del nombre del evento. Entonces, cualquier evento con ese nombre disparará su devolución de llamada. Elevar un evento, por otro lado, requiere un poco de planificación.
Digamos que tengo un evento que se plantea aquí, en Child Scope 1, pero queremos escuchar ese evento en Child Scope 2. Desafortunadamente, no podemos hacer que eso suceda.
Hay dos opciones para generar un evento en Angular JS.
El primero es llamar al alcance. $ Broadcast, que genera el evento en el alcance de origen y luego lo envía a todos los ámbitos secundarios.
La otra opción es llamar al alcance. $ emit, que genera el evento en el ámbito de origen y luego lo envía a la cadena de ámbito.
Pero no hay una forma verdaderamente global de transmitir desde el alcance de un niño. La forma de hacer que eso suceda es obtener el $ rootScope y llamar a $ broadcast en él, que lo envía a todos los ámbitos secundarios.
Ahora vamos a ajustar nuestro código para que funcione con eventos en lugar de ámbitos heredados. Entonces, el primer problema que notamos que queremos que resuelva un evento es el hecho de que aquí, en el controlador de Catálogo, este método registerCourse () está llamando a empujar directamente a los datos de programación. Ese no es su trabajo.
Agregar elementos a la programación no es algo que el controlador del Catálogo debería estar haciendo. En cambio, lo que debería estar haciendo es notificar a alguien más que un curso se está registrando y luego confiar en que otros objetos agregarán las correcciones del curso al cronograma. Por lo tanto, el objeto que debería ocuparse de la programación es el controlador de programación, por supuesto.
Así que vamos al controlador de programación y agreguemos un detector de eventos. Llamaremos a nuestro curso de evento registrado. El primer parámetro para una devolución de llamada a un evento es un objeto de evento y luego, después de eso, cualquier parámetro adicional que coloque al generar el evento.
Así que vamos a planear el hecho de que quien haya planteado el evento también va a poner el curso que ha planteado el evento. Entonces, desde aquí, podemos hacer la lógica que se realizó originalmente en el método registerCourse () aquí mismo.
Ahora, en lugar de confiar en que el cronograma esté en el $ alcance, ya vamos a quitar el $ alcance y simplemente traer el servicio programado. Y dado que traemos el programa aquí, ya no necesitamos reducirlo en nuestro controlador de Registro.
Entonces podemos tomar esta línea aquí, moverla a nuestro controlador de Programación, y ahora quitar esa dependencia del controlador de Registro.
Ahora es genial que hayamos escuchado el evento aquí, pero nadie está planteando ese evento. El lugar aquí en el método registerCourse () en el controlador de catálogo.
El controlador de catálogo no puede generar un evento que pueda ser escuchado por el controlador de programación porque son hermanos. Entonces, lo que tendremos que hacer es establecer una dependencia en $ rootScope.
Luego, desde aquí podemos llamar a $ rootScope. $ Broadcast () genera el evento que estamos buscando y agrega el parámetro que debe estar en ese evento.
Ahora tenemos otra cosa que podemos limpiar. Justo aquí estamos llamando $ scope.notify, pero ya estamos planteando el evento de que hemos registrado el curso. Deberíamos permitir que otra persona maneje la notificación cada vez que se registre un curso.
Regresemos a nuestro controlador de registro y agreguemos un detector de eventos.
Y luego desde aquí, podemos llamar al código para hacer la notificación. Parece mucho más apropiado hacerlo dentro del controlador de registro, ya que es el lugar donde definimos el método notify ().
Verifiquemos esta salida en el navegador y veamos cómo funciona.
Nuestros cambios han funcionado muy bien.
Ahora veamos el código y analicemos los beneficios y las desventajas de usar eventos. El primer beneficio que notamos que nos gusta es que la lógica en cada uno de los controladores tiene algo que ver con ese controlador.
El controlador del catálogo tiene una lógica sobre la generación del evento cuando alguien hace clic en el botón Registrar curso y la lógica sobre cómo marcar un curso registrado. La programación tiene la lógica de agregar los elementos a la programación y el controlador de registro tiene la lógica de las notificaciones. Debido a eso, no tenemos un controlador que brinde servicio con el que no tienen nada que ver.
Además, nuestro controlador raíz no está abarrotado de dependencias con las que no tiene nada que ver. Sin embargo, hay algunos inconvenientes. Cualquiera que maneje un evento puede cancelar ese evento. Esto puede provocar errores graves.
Si algún controlador en particular cancela un evento y no se ha procesado un oyente que aún necesita saber sobre ese evento. Estamos acoplando nuestro controlador a esos eventos.
El inconveniente de los eventos es que usamos una cadena para el nombre del evento y es difícil evitar conflictos de nombres de eventos.
La única protección es una buena estrategia de nombres para los nombres de eventos.
Conclusión - AngularJS Events
- Elimina el estado del servidor.
- Permite el conocimiento de la aplicación nativa
- Pone la lógica de vista fácilmente en JavaScript
- Requiere información sobre habilidades innovadoras, así como procedimientos
Artículos recomendados
Esta es una guía para los eventos de AngularJS. Aquí discutimos los conceptos básicos de AngularJS y explicamos el evento AngularJS con los ejemplos. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Prueba de unidad AngularJS
- Arquitectura AngularJS
- Directivas AngularJS
- Carrera en AngularJS
- Los 5 principales atributos de eventos HTML con ejemplos
- Guía de diferentes eventos de JavaScript