Removing # from AngularJS Url when using ngroute

Question

Angular Newbie here. I'm working on building a simple site that loads templates into the index page using the ngRoute module. So far everything is going well and I decided that I'd ideally like to remove the ugly # from the Urls when each template is loaded in.

I'd like to go from http://localhost/angularWebapp/#/home to http://localhost/angularWebapp/home

Here is my links:

<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>

Here is my Routes:

app.config(['$routeProvider', '$locationProvider',  function ($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);
        $routeProvider
                .when("/home", {templateUrl: "partials/home.html", controller: "PageCtrl"})  //Home
                .when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"}) //About
                .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"}); //404
    }]);

But when I load my page I get nothing and instead see this error in console:

Error: [$location:nobase] http://errors.angularjs.org/1.3.15/$location/nobase

I read the error link and it says I need a base tag but I added it to my header and unfortunately it still is showing an error:

<base href="AngularWebApp/">

But then I get this error:

Error: [$compile:ctreq] http://errors.angularjs.org/1.3.15/$compile/ctreq?p0=ngInclude&p1=ngInclude

Any help would be great, thanks.

DanielM · Accepted Answer · 2015-04-17 12:21:20Z

4

<Base> is the base url, it's not related to Angular.

<base href="http://www.example.com/page.html">

You can also switch it off by including an extra parameter.

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

answered Apr 17, 2015 at 12:21

DanielM

6,7262 gold badges42 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Removing # from AngularJS Url when using ngroute

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