Search code examples
angularjsurlangular-ui-routerpretty-urls

Angularjs base tag and $locationProvider prevents templates to be loaded

I want to remove the # on angularjs url. So I followed this blog.

This is my .config() :

.config(['$stateProvider', '$locationProvider' function($stateProvider, $locationProvider,) {

     $stateProvider.state('main', {
        url: '/',
        templateUrl: 'path/to/main.html',
        controller:'mainCtrl'
     })

     $locationProvider.html5Mode(true);
}])

And this is my <header> :

<head>
    <scripts>....

    <base href="/"> // I ADDED THIS
</head>

But when I access the / link. Like this http://localhost/my-app/ it only shows a blank page. There are no error/s on the console so Im assuming that the problem is on the loading of the template. Im using ui.router. Someone encountered this problem? Thanks.

Solution

  • 1st When you use <base href="/"> yu set ALL relative URLs appends to that path. So IF your app is aviable at /my-app/ use <base href="/my-app/"> Also you can try relative base href <base href="./">, but i don't recomend it. Now your app is in http://localhost/my-app/ but base is http://localhost/

    2nd When you use html5 routing, you may ensure that webserver does not repsonse other page, but your index.html

    3rd, after that check your JS, maybe cant load template because of base url...