I'm developing a web application which defines the <base href="phoenix/"> in the header as explained in this article.

The default URL that is mapped is http://localhost/phoenix/ however even when defining the base tag in the header my views and routes are not being redirected correct.

I enabled HTML5 routing:

$locationProvider.html5Mode(true);

and then defined my route like:

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl: '/views/login.html',
        controller: 'LoginCtrl'
    });
}]);

It tries to resolve it as:

 GET http://localhost/views/login.html 404 (Not Found) 

It works correctly if I append the base url to the /phoenix/login paths. Should I have to append that via a variable I set or something or am I missing something and this should work. Also, is this going to work on say IE8 with the header attribute base?

I'm developing a web application which defines the <base href="phoenix/"> in the header as explained in this article.

The default URL that is mapped is http://localhost/phoenix/ however even when defining the base tag in the header my views and routes are not being redirected correct.

I enabled HTML5 routing:

$locationProvider.html5Mode(true);

and then defined my route like:

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl: '/views/login.html',
        controller: 'LoginCtrl'
    });
}]);

It tries to resolve it as:

 GET http://localhost/views/login.html 404 (Not Found) 

It works correctly if I append the base url to the /phoenix/login paths. Should I have to append that via a variable I set or something or am I missing something and this should work. Also, is this going to work on say IE8 with the header attribute base?

• javascript
• html
• angularjs

• 2 First guess is to remove the / from 'views/login.html'. – stiebitzhofer Commented Nov 12, 2013 at 21:34
• wow I feel like an idiot. Thanks for the tip! – amcdnl Commented Nov 12, 2013 at 22:03
• No problem, ran into the same issue some time ago and it took me quite some time to figure out. AngularJS is great but sometimes pain to do work with. – stiebitzhofer Commented Nov 13, 2013 at 9:01

1 Answer 1

Removing the slash from the views

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl: 'views/login.html',
       controller: 'LoginCtrl'
    });
}]);

and making links like:

 <a href="login">Login</a>

but leaving the slash for the route resolved the problem.