AngularJS and GitHub Pages - loading templates issue

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?

jshanley · Accepted Answer · 2014-04-28 00:44:24Z

5

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

answered Apr 28, 2014 at 0:44

jshanley

9,1382 gold badges39 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS and GitHub Pages - loading templates issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related