AngularJS and GitHub Pages - loading templates issue

StackOverflow https://stackoverflow.com/questions/23330662

Question

I'm trying to set up my Angular app on GitHub pages at http://moroshko.github.io/seekdeck.

The Angular routes are defined in application.js:

<html ng-app="SeekDeck">
  <head>
    ...
    <script src="scripts/application.js"></script>
    ...
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>

application.js is loaded from /seekdeck/scripts, as expected.

My app routes look like this:

// Part of application.js
$routeProvider
  .when("/", {
    templateUrl: "templates/dashboard/dashboard.html",
    ...
  })
  ...

When Angular tries to get the dashboard.html template, it tries to load it from /templates/dashboard rather than /seekdeck/templates/dashboard, and therefore it cannot find it.

Any ideas why is this happening, or how could I fix this?

Was it helpful?

Solution

This is happening because angular is expecting that url to be relative to the root of the domain, not to the location of your app. In other words, it is expecting it to be relative to moroshko.github.io not moroshko.github.io/seekdeck.

You can solve this easily by adding a base element to your html page, and setting its href attribute to the path you want the root of your app to be (in your case /seekdeck/)

Put the following tag inside the <head> of your html page:

<base href="/seekdeck/" />

Also make sure you are setting html5mode(true) in $locationProvider.

There's an excellent blog post about it HERE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top