Tutorial #18 del curso de angular js, en este tutorial veremos como añadir soporte a dispositivos móviles utilizando un módulo adicional, el cual nos permite utilizar los eventos touch (pantalla tactil), utilizamos el anterior para este tutorial.
Descargar módulos Angular JS: https://code.angularjs.org/1.5.0-rc.0/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Eventos touch Angular JS</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-touch.min.js"></script>
<style>
#cuadrado{ background: red; width: 100px; height: 100px; margin: 30px 10px;}
</style>
</head>
<body ng-app="eventosApp">
<div ng-controller="eventosController">
<button ng-click="saludo()">Click</button>
<button ng-dblclick="saludo()">Doble Click</button>
<p ng-click="saludo()">También funciona en párrafos</p>
<strong>{{conteoClicks}}</strong>
<div id="cuadrado" ng-mouseenter="dentroDelDiv()" ng-mouseleave="fueraDelDiv()" ng-swipe-left="swipeIzq()" ng-swipe-right="swipeDer()"></div>
<strong>Estado {{estado}}</strong>
</div>
<script type="text/javascript">
var miApp = angular.module('eventosApp', ['ngTouch']);
miApp.controller('eventosController',function($scope){
$scope.estado = 'mouse';
$scope.conteoClicks = 0;
$scope.saludo = function(){
$scope.conteoClicks++;
}
$scope.dentroDelDiv = function(){
$scope.estado = 'MouseEnter activo';
}
$scope.fueraDelDiv = function(){
$scope.estado = 'MouseLeave Fuera';
}
$scope.swipeIzq = function(){
$scope.estado = '<-- Swipe';
}
$scope.swipeDer = function(){
$scope.estado = 'Swipe -->';
}
});
</script>
</body>
</html>