AngularJS is all the rage these days, and for good reason. It’s a lightweight and modern way to create Rich Internet (single page) Applications. It is elegant and powerful. If you are considering implementing a WWW site using AngularJS, there are at least three rather huge downsides that you may want to consider.
SEO
SEO is a big consideration if you want people to be able to find your site or pages on your site via search engines. While AngularJS itself is a Google open source project, even their search engine doesn’t support AngularJS fully and you certainly shouldn’t count on other search engines, like Bing and others, to support AngularJS apps.
AngularJS single page apps use the browser’s location.hash to identify a state that the application should render. Much of the page content may be dynamically loaded partial HTML files. Unfortunately, search engine spiders do not execute JavaScript on the pages they load, so they will never see any of your awesome dynamic content.
One solution is to periodically dynamically generate a sitemap file and submit it to each of the search engines that supports sitemaps. You can read about them here. Note that on that page, Google warns:
Note that use of a sitemap doesn’t guarantee you that all the web pages listed in your sitemap can be crawled or indexed as Google processes rely mainly on complex algorithms. In most cases, webmasters benefit from sitemap submission, and in no case can you be penalized for it.
Other solutions are downright ugly. For example, render all the partials fully populated with data within a <script> tag in your page. Or basically implement two complete versions of your site/app – one for the spiders to index, one for your visitors to see.
You may want to read this blog post that details some of the ugliness.
SEO is not always a consideration, but if you want search engine referral traffic, you might think hard about going the AngularJS route.
Analytics
Google Analytics is just one flavor of tools for measuring the activity of visitors to your site. I’ll address Google Analytics here since it’s free and very popular.
In a traditional page-oriented web site, you simply embed “magic” code at the bottom of your HTML and Google handles everything for you. As the URL changes in the user’s browser, new pages are loaded and Google notified of that.
This isn’t how single page applications work, though. If you include the embed code in the index.html for your AngularJS app, it will only send information about the initial URL and only once. As your user changes states and hash-type URLs, Google is oblivious.
This gotcha has a reasonable solution, but it’s not perfect. There is at least one package you can add to your application to facilitate analytics: angularitics.
Angularitics has a lot of features and functionality, but you are almost certain to have to consider the analytics API as you code, adding extra work and possibility of error.
Advertising
Unless you can afford to have your own advertising salesforce, Google Adsense is probably the easiest and best paying means to generate revenue for your site.
Adsense relies on you embedding a JavaScript program they provide in the pages you want ads to appear. The program analyzes and evaluates the content of your page and identifies ads that are targeted based upon that content. In an angularjs app, there may not be any content at all upon page load so AdSense has no sense of what ad to show.
It’s been against the Google AdSense TOS to do any workarounds, like triggering an ad to display after you know the DOM has useful content it can deal with. You’d think that Google, as an advertising company and as the sponsor of AngularJS, would have figured out how to deliver ads for dynamic single page apps by now.
There are solutions to be found, but it’s not going to be as easy as adding the AdSense embed code to your HTML page.
Conclusion
If SEO, Analytics, and Advertising are strong concerns for your endeavor, be sure to consider the effort and/or feasibility of doing these things well if you choose AngularJS. One possibility is to build a large site out of lots of small AngularJS one-page applications that are relatively short lived.
