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.

Give it a try! It’s available on Bower and NPM.

Or even better, contribute here: https://github.com/onemanclapping/angular-touch-faster

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s