Aprendiendo AngularJS (X). Eventos (II)
En la entrada anterior hemos visto cómo funcionaban los eventos e incluso hemos realizado algunos ejercicios que necesitaban de los mismos. En esta entrada aprenderás a controlar la posición sobre la que circula el ratón. De esa manera puedes realizar juegos y crear muchas funcionalidades para tus aplicaciones.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<a href="http://myfpschool.com/wp-content/uploads/2016/08/mapamundo.jpeg"><img ng-mousemove="Localiza($event)" src="http://myfpschool.com/wp-content/uploads/2016/08/mapamundo.jpeg" alt="mapamundo" width="326" height="155" class="alignnone size-full wp-image-4277" /></a>
<h1 >Hemisferio Norte y Sur</h1>
<p>Coordenadas en la foto: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Localiza = function(loc) {
$scope.x = loc.clientX;
$scope.y = loc.clientY;
}
});
</script>
<p>Dependiendo de la posición del ratón te diremos si está en el hemisferio norte o sur</p>
</body>
</html>
Como ejercicio te proponemos que copies y ejecutes el código anterior en una nueva página web.
Comprueba que funciona.
Al ejercicio le falta algo. No detalla si el ratón está posicionado en el Hemisferio Norte o en el Hemisferio Sur. Completa el ejercicio con esta nueva funcionalidad.
Mejora el ejercicio anterior para que nuestra web reconozca si el ratón está al Este o al Oeste de España.
