Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 2.2 Eventos ======
Hemos visto cómo indicando un mensaje en el ''$scope'' podemos mostrarlo fácilmente en el HTML mediante ''%%{{ }}%%''. Pero la gracia de angular es que si modificamos el mensaje se actualiza automáticamente el HTML. Para poder cambiar el mensaje debemos incluir una nueva directiva ((Una directiva es un nuevo elemento o atributo HTML que se ha //inventado// angularjs en el HTML)) llamada ''ng-click'' que permite ejecutar una función JavaScript al pulsar sobre un elemento HTML.

El ejemplo ahora quedaría así: 

<sxh js; title:index.html; highlight: [11];>
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <h1>{{mensaje}}</h1>
    <button ng-click="cambiarMensaje()">Cambio</button>
  </body>

</html>
</sxh>

  * Línea 11: Está la nueva directiva ''ng-click'' que permite especificar una función JavaScript que se ejecutará al pulsar sobre el elemento. El método a ejecutar es ''cambiarMensaje()''. 

Desgraciadamente el método no puede ser una simple función JavaScript llamada ''cambiarMensaje''. Al igual que ocurre con las variables que deben estar en el ''$Scope'', la función ''cambiarMensaje'' tambien deberá ser una función definida en el ''$scope''.

<sxh js ; title:script.js; highlight: [6,7,8]>
var app=angular.module("app",[]);
 
function PruebaController($scope) {
  $scope.mensaje="Hola Mundo";
  
  $scope.cambiarMensaje=function() {
    $scope.mensaje="Adios mundo cruel :-)";
  }
  
}
</sxh>

  * Lineas 6-8: Vemos cómo hemos definido una nueva propiedad llamada ''cambiarMensaje'' cuyo valor es una función anónima en JavaScript y que no tiene parámetros. El cuerpo de la función es simplemente cambiar el texto de la propiedad ''mensaje'' al nuevo valor "Adios mundo cruel :-)".

<note>
Puede parecer un poco extraño la forma de definir una función en el ''$scope'' pero lo que hacemos es crear la función , sin nombre, y luego se la asignamos a la propiedad ''cambiarMensaje''. De esa forma la propiedad ''cambiarMensaje'' realmente es una función y podría se llamada de la siguiente forma: 

<sxh js>
$scope.cambiarMensaje();
</sxh>

</note>

Si lo pulsamos veremos que en la página HTML ha cambiado el texto al nuevo valor.

<note tip>
Ésto, que parece una cosa de poca importancia, es una de las cosas más fascinantes de AngularJS. Antes de AngularJS si cambiábamos el valor de una variable en JavaScript debíamos llamar explicitamente a alguna función creada por nosotros que actualizara el HTML y //rezar// para que no se nos olvidara llamarlo ya que sino el HTML no se actualizaría. Ahora con AngularJs podemos olvidarnos de ello. Siempre que cambiamos el valor de una variable ((que como ya hemos dicho forme parte del $scope)) AngularJS automáticamente actualiza el HTML. La de líneas de código y dolores de cabeza que nos vamos a ahorrar con ésto.
</note>

===== databinding =====
Seguimos con el //Data-binding// y vemos ahora que al modificar el modelo automáticamente se regenera el HTML.

**La generación del HTML se produce también cada vez que cambia el modelo**

{{:unidades:02_angular:databinding2.png|}}


¿Qué hace Angular? Como ya vimos en el tema anterior, angular genera el HTML a partir del modelo y la plantilla , pero si se modifica el modelo , AngularJS automáticamente vuelve a regenerar el HTML. Esto es algo que con JSP o ASP implica un refresco de página con todos los problemas que lleva implícitos. Con angular es simplemente cambiar un valor en JavaScript: '' $scope.mensaje="Adios mundo cruel :-)";''

En el siguiente tema seguiremos viendo la última características del //Data-binding// de AngularJS

===== Otros eventos =====
Al igual que ''ng-click'' existen otras directivas de tratamiento de eventos:

  * [[https://docs.angularjs.org/api/ng/directive/ngDblclick|ng-dblclick]]:Cuando se produce el evento doble click.
  * [[https://docs.angularjs.org/api/ng/directive/ngBlur|ng-blur]]:Cuando se produce el evento blug.
  * [[https://docs.angularjs.org/api/ng/directive/ngChange|ng-change]]:Cuando se cambia el tag ''<input>'' o ''select>'' pero no cuando se cambia a consecuencias del propio modelo.
  * [[https://docs.angularjs.org/api/ng/directive/ngCut|ng-cut]]:Cuando se produce el evento cut.


==== Eventos de teclado ====
  * [[https://docs.angularjs.org/api/ng/directive/ngKeydown|ng-keydown]]:Cuando se produce el evento keydown.
  * [[https://docs.angularjs.org/api/ng/directive/ngKeyup|ng-keyup]]:Cuando se produce el evento keyup.
  * [[https://docs.angularjs.org/api/ng/directive/ngKeypress|ng-keypress]]:Cuando se produce el evento keypress.

==== Eventos de ratón ====
  * [[https://docs.angularjs.org/api/ng/directive/ngMousedown|ng-mousedown]]:Cuando se produce el evento mousedown
  * [[https://docs.angularjs.org/api/ng/directive/ngMouseenter|ng-mouseenter]]:Cuando se produce el evento mouseenter
  * [[https://docs.angularjs.org/api/ng/directive/ngMouseleave|ng-mouseleave]]:Cuando se produce el evento mouseleave
  * [[https://docs.angularjs.org/api/ng/directive/ngMousemove|ng-mousemove]]:Cuando se produce el evento mousemove
  * [[https://docs.angularjs.org/api/ng/directive/ngMouseover|ng-mouseover]]:Cuando se produce el evento mouseover
  * [[https://docs.angularjs.org/api/ng/directive/ngMouseup|ng-mouseup]]:Cuando se produce el evento mouseup



<note warning>
Si lo único que quieres es comprobar como cambia el valor de una propiedad del ''$scope'' , siempre que puedas no utilices ninguno de los eventos anteriores , para comprobar si cambia el valor de una propiedad del ''$scope'' está la función [[unidades:11_rootscope:01_watch|$watch]]
</note>
===== Ejemplo =====

{{url>http://embed.plnkr.co/Hn0qiimGlj1X5kiUa10t}}

===== Referencias =====
  * [[https://docs.angularjs.org/api/ng/directive/ngClick|ngClick]]