Shows how to make Angular live happily at a non-root path (i.e. not at /), and introduces the <base>HTML element.

The Problem

So you’ve built an AngularJS app, kicked the tires using any one of a number of locally run web servers, and it’s time to put it live. You want the app to live somewhere other than the root of the domain / — perhaps /firefly/ for example. What is the most DRY way to accomplish this?

Option One: Modify Routes

One possibility would be to modify your routes and add a prefix to all paths:

This disables the hashbang mode for modern browsers, and leverages the HTML5 History API. One downside of the <base> element is that since all link paths are now interpreted as relative to the base’s href, hash tag links (e.g. <a href="#top">Top</a>) will not work properly without some finagling. Possible remedies include altering the <base> element on a page that has a lot of said hash tag links, or simply referencing an absolute url with the hash tag appended.