The ngTouch module contains the $swipe service, which is used to improve support for touchscreen devices beyond the basic events I described in Chapter 11. The events in ngTouch module provide notification of swipe gestures and a replacement for the ng-click directive, which addresses a common event problem on touch-enabled devices.
1. Why and When to Use Touch Events
The swipe gestures are useful whenever you want to improve support for touchscreen devices. The ngTouch swipe events can be used to detect left-to-right and right-to-left swipe gestures. To avoid confusing the user, you must ensure that the actions you perform in response to these gestures are consistent with the rest of the underlying platform—or at the very least, the default web browser for that platform. For example, if the right-to-left gesture usually means “go back” in the web browser, then it is important that you do not interpret the gesture in your application in a different way.
The replacement for the ng-click directive is useful for touch-enabled browsers because they synthesize click events for compatibility for JavaScript code that has been written with mouse events in mind. Touch browsers generally wait for 300 milliseconds after the user has tapped the screen to see whether another tap occurs. If there is no second tap, then the browser generates the touch event to represent a tap and a click event to simulate a mouse—but that 300-millisecond delay is just enough of a lag to be noticeable to the user, and it can make an application appear unresponsive. The ng-click replacement in the ngTouch module doesn’t wait for a second tap and issues the click event much faster.
2. Installing the ngTouch Module
The ngTouch module must be downloaded from http://angularjs.org. Follow the same procedure as for the ngAnimate module earlier in the chapter, but select the angular-touch.js file and download it into the angularjs folder.
3. Handling Swipe Gestures
To demonstrate swipe gestures, I have created an HTML file called swipe.html in the angularjs folder. Listing 23-5 shows the contents of the new file.
Listing 23-5. The Contents of the swipe.html File
<!DOCTYPE html>
<html ng-app=”exampleApp”>
<head>
<title>Swipe Events</title>
<script src=”angular.js”></script>
<script src=”angular-touch.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“exampleApp”, [“ngTouch”])
.controller(“defaultCtrl”, function ($scope, $element) {
$scope.swipeType = “<None>”;
$scope.handleSwipe = function(direction) {
$scope.swipeType = direction;
}
});
</script>
</head>
<body ng-controller=”defaultCtrl”>
<div class=”panel panel-default”>
<div class=”panel-body”>
<div class=”well”
ng-swipe-right=”handleSwipe(‘left-to-right’)”
ng-swipe-left=”handleSwipe(‘right-to-left’)”> <h4>Swipe Here</h4>
</div>
<div>Swipe was: {{swipeType}}</div>
</div>
</div>
</body>
</html>
I start by declaring a dependency on the ngTouch module. The event handlers are applied through the ng-swipe-left and ng-swipe-right directives. I have applied these directives to a div element and set them to call a controller behavior that updates a scope property that is displayed using an inline binding expression.
The swipe gestures will be detected on touch-enabled devices or when the gesture is made using the mouse. The best way to test touch events is with a touch-enabled device, of course. But if you don’t have one on hand, then I find the ability of Google Chrome to simulate touch input to be useful. Click the gear icon in the bottom-right corner of the F12 tools window, select the Overrides tab, and enable the Emulate Touch Events option. Google seems to redesign the layout of the F12 tools every now and again, so you may have to hunt around to find the right option. Once touch events are enabled, you can use the mouse to swipe left and right using the mouse, and the browser will generate the required touch events, as shown in Figure 23-3.
4. Using the Replacement ng-click Directive
I am not going to demonstrate the replacement ng-click directive because it is a like-for-like replacement for the one I described in Chapter 11.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.