"Dude! Where are my page views?"

AngularJS and web analytics part 1

AngularJS is used to create so-called single page applications. The big idea is that quite often your website will have exactly the same header and footer page after page, only the middle part will change. So why not load the parts that do not change only once and then only load the content that changes as you load each page? Some of you might say it's just like a web page using iframe then and it's a very close analogy. You will have a master page with an empty placeholder in the middle and only the empty placeholder will load the content that does change.

The main advantage of such a technique is faster websites which could translate into slightly improved search engine rankings. Google penalises slow websites by giving them lower rankings. Although from a purely SEO perspective AngularJS can be pretty terrible which is strange considering that AngularJS is a piece of Google technology. I'll expand on SEO later. Another advantage is lower data allowance consumption for your visitors on mobile devices.

You can add and change URLs by appending a new hash value without reloading a new page but it will add a record in the browing history. This means that you can give the impression that a full page loads without loading full pages and the back button still works! This is no AngularJS feature but AngularJS leverages this. If you are not particularly fond of the hash in the URLs you can even hide them altogether and use what looks like ordinary URLs. At that stage it can be difficult to notice the difference between an AngularJS and a non-AngularJS one except that full page reloads do not seem to happen and the website feels snappier somehow.

The other trick that AngularJS often relies on is fetching so-called templates or HTML fragments using Ajax, i.e. a Javascript technique for loading files in the background, and then inserting the contents of these files inside the empty placeholder. These content injections happen in response to the visitor using the website navigation. A few AngularJS modules do this, ngRoute and ui-Router. The former does not allow nesting the placeholders, ui-router does allow nesting, within reason.

Other AngularJS articles

Code examples