NORMAN SALVADOR ARUZ LPEZ

ANGULAR
JS DE 0 A 100
INTERACCION EN ANGULAR JS

UNAN MANAGUA, FAREM MATAGALPA

Introduccin
En una aplicacin la interaccin con el usuario se vuelve absolutamente crucial,
en estas app las acciones que se pueden ejecutar se llaman acciones o
eventos, en angular tambin existen eventos que simplifican el trabajo de
controlar estas acciones.
Administrar mltiples eventos en Angular JS
Tomemos como punto de partida la plantilla en HTML:

Aqu
ya
hemos
configurado
un
controlador para la aplicacin y un
evento en el botn:

Cada vez que se haga click en el botn

algo ocurrir, por el momento no est
pasando nada puesto que no hemos hecho un evento que escuche el click en el
botn, pero lo haremos a continuacin:

Todos los derechos reservados

Cada vez que se haga click en

el botn se escuchar el evento

Ahora agregaremos la directiva que har esto posible, para ello es usaremos
ng-click para agregar el comportamiento deseado:

En el navegador:

Todos los derechos reservados

Como vemos ahora si est escuchando el evento click, y est mostrando un

valor dentro de la variable. Hora agregaremos un segundo evento que consiste
en realizar un doble click en el elemento, veamos la plantilla HTML:
Hemos
agregado
un
segundo botn
al cual hemos
asignado
una
directiva
para
escuchar
un
doble click ng-dblclick, y hemos asignado un evento llamado doble click, a
continuacin se muestra el escript del evento doble click:

Veamos lo que pasa en nuestro navegador: El botn de la

izquierda espera un solo click mientras que el segundo
espera un click doble:

Los eventos no estn sub editados a botones, podemos asignar este tipo de
eventos a otros elementos del DOM (html) por ejemplo poner una imagen
dentro del cdigo y a la imagen agregar dos nuevas directivas, ngmouseleave, que se activa cuando quitamos el mouse de nuestro elemento, y
la segunda directiva es ng-mouseenter, que se activa cada vez que el mouse
entra en la imagen, veamos la plantilla html:

Todos los derechos reservados

Listo! Ahora cuando el usuario pase el mouse sobre la imagen se activar la

directiva ng-mouseenter y dar paso al evento mouseEntraImagen() mientras
que cuando el mouse deja la imagen, utilizando la directiva ng-mouseleave
se activar el evento mouseDejaImagen. Veamos este comportamiento en el
navegador:

Todos los derechos reservados