Faster navigation on Angular mobile apps

I’ve recently discovered that angular-touch doesn’t do a great job on link-based navigation. Although it prevents the 300ms delay that mobile browsers implement while trying to figure out if your tap on the screen was a click or a double-tap zoom gesture, it only does so for click handlers (through the use of ng-click), not anchors.

Since many Angular apps use links to navigate throughout its multiple views (and they should, SEO-wise), either we implement click handlers for all the links or live with that very annoying delay where the app is just doing nothing, when it could already be loading the next page.

With that in mind, I’ve just created a tiny project called angular-touch-faster. It is intended to be a small set of directives to give our Angular mobile apps that extra performance kick.

For now, I’ve only included an extra ‘a’ directive. It simply registers a click handler on all existent anchors, switching your browser’s location with the content of the anchor’s href attribute. Just include the module as your app dependency and you can immediately feel the difference.

Not only that, but you also don’t lose the active state on the element you clicked, giving the user some much needed feedback while the browser is navigating away.