Link to "/" works in some browsers only

Question

This link does not work in all browsers in my angularjs onepage app.

<a href="/">homepage</a>

Depending on the browser the url becomes different. In some browser the url ends with a trailing "/#" and others with "/#/" e.g. "http://localhost/#" and "http://localhost/#/". This means that in non IE browsers request ending with /# fails to load ViewA

This is my route provider:

mainApp.config(["$routeProvider",
function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "Views/ViewA.html"
        })
        .when("/home", {
            templateUrl: "Views/ViewB.html"
        })
        .otherwise({
            redirectTo: "/"
        });
}]);

Is there a way to make the browsers behave the same? A library to reference? My only references er: angular.js angular-route.js

score 1 · Answer 1 · answered Apr 23 '15 at 14:37

1

I'd say your anchor should be:

<a href="/#/">homepage</a>

answered Apr 23 '15 at 14:37

Dwight Gunning

2,485
25
39

yes, that would work, but that's not what I meant. Is there a way to get the url "/" to work in all browsers? – Tony Apr 23 '15 at 14:56
By default the # is necessary. That depends whether you want to support non-HTML5 browsers. See: http://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash – Dwight Gunning Apr 23 '15 at 14:59

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

I suggest you to take a look at the answer to a similar question here

It basically depends on the angular routing mode you want to use:

Hashbang Mode;
HTML5 Mode;
Hashbang in HTML5 Mode

edited May 23 '17 at 12:22

Community

1
1

answered Apr 23 '15 at 15:01

pgrodrigues

2,083
1
24
28

score 0 · Answer 3 · answered Apr 23 '15 at 15:21

Adding a locationProvider with html5mode set to true, seems to solve my issues

mainApp.config(["$locationProvider", "$routeProvider",
function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when("/", {
            templateUrl: "Views/ViewA.html"
        })
        .when("/home", {
            templateUrl: "Views/ViewB.html"
        })
        .otherwise({
            redirectTo: "/"
        });
}]);

Link to "/" works in some browsers only

3 Answers3