Interfaz de usuario angular móvil: eventos táctiles
Para trabajar con Touch y sus eventos, debe agregar el siguiente módulo:
mobile-angular-ui.gesturesSi solo está interesado en el módulo táctil, puede agregar solo mobile-angular-ui.gestures.touch .
$ touch es un servicio disponible con módulo táctil. Funcionará en cualquier dispositivo de entrada con el que desee trabajar. Da detalles como movimiento, duración, velocidad, dirección, etc.
Métodos en $ touch
Los siguientes son los métodos disponibles en $ touch:
enlazar
Echemos un vistazo al método de vinculación .
Syntax
$touch.bind(element, eventHandlers, [options])Parameters
element - elemento html que desea tratar con detalles táctiles.
eventHandlers- Un objeto con controladores para eventos táctiles específicos. Los eventHandlers disponibles son:
start - es una devolución de llamada para el evento touchstart.
end - es un evento de devolución de llamada para tocar.
move - es una devolución de llamada para el evento touchmove.
cancel - es una devolución de llamada para el evento touchcancel.
options - Es un objeto que puede tener los siguientes detalles -
movementThreshold- Un valor entero. El número de píxeles de movimiento antes de comenzar a activar los controladores touchmove.
valid - Es una función que devuelve un valor booleano que decide si un toque debe manejarse o ignorarse.
sensitiveArea- Puede ser una función, un elemento o BoundingClientRect. El área sensible define los límites para liberar el tacto cuando el movimiento está afuera.
pointerTypes - Es una matriz de punteros que tiene claves que son un subconjunto del mapa de eventos de puntero predeterminado.
Tipos disponibles en $ touch
Los siguientes son los tipos disponibles en $ touch:
| Propiedad | Tipo | Descripción |
|---|---|---|
| tipo | cuerda | Esto le dirá el tipo de evento. Por ejemplo: touchmove, touchstart, touchend, touchcancel |
| marca de tiempo | Fecha | La marca de tiempo cuando ocurrió el toque |
| duración | En t | Diferencia entre el evento táctil actual y el inicio táctil |
| startX | flotador | Coordenada X de touchstart |
| startY | flotador | Coordenada Y de touchstart |
| prevX | flotador | Coordenada X del touchstart o touchmove ocurrido anteriormente |
| ANTERIOR | flotador | Coordenada Y del touchstart o touchmove ocurrido anteriormente |
| X | flotador | Coordenada X del evento táctil |
| y | flotador | Coordenada Y del evento táctil |
| paso | flotador | La distancia entre los puntos prevX, prevY y x, y |
| pasoX | flotador | La distancia entre los puntos prevX y x |
| stepY | flotador | La distancia entre los puntos anterior y y |
| velocidad | flotador | Velocidad en píxeles de un evento táctil por segundo |
| velocidad media | flotador | Velocidad promedio del evento de inicio táctil por segundo |
| distancia | flotador | La distancia entre los puntos startX, startY y x, y |
| distanciaX | flotador | La distancia entre los puntos startX y x |
| distanciaY | flotador | La distancia entre los puntos startY y y |
| total | flotador | El movimiento total, es decir, el movimiento horizontal y vertical realizado a través del dispositivo. |
| totalX | flotador | El movimiento total, es decir, la dirección horizontal, también incluye cambios de dirección y cambios de dirección. |
| totalY | flotador | El movimiento total, es decir, la dirección vertical, también incluye cambios de dirección y cambios de dirección. |
| dirección | flotador | La ubicación del tacto en la dirección izquierda, superior, inferior y derecha |
| ángulo | flotador | El ángulo en grados desde el eje xey |
Aquí hay un ejemplo práctico que muestra los tipos de toque.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
<style>
a.active {
color: blue;
}
</style>
</head>
<body ng-app="myFirstApp" ng-controller="MainController" class="listening">
<!-- Sidebars -->
<div class="sidebar sidebar-left ">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>Ahi esta touchtest directiva agregada en app.js que hace uso del método $ touch.bind.
directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);El código completo dentro de app.js es el siguiente:
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});src/home/home.html
La directiva touchtest se usa dentro del html como se muestra a continuación:
<div class="section touchtest">
<h4>Touch Around on the screen to see the values changing</h4>
<div>
<p>type: {{touch.type}}</p>
<p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
<p>point: [{{touch.x}}, {{touch.y}}]</p>
<p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
<p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
<p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
<p>velocity: {{touch.velocity}} px/sec</p>
<p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
<p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
</div>
</div>Ahora probemos la pantalla en el navegador. La pantalla resultante es la siguiente:
