javascript - how to remove hash tag (#) from url address in ui-router

My url looks like this http://127.0.0.1:50884/index.html#/home

This is index page. I am using angular ui-router to change to various views like but url es with # tag like this: http://127.0.0.1:50884/index.html#/mobileOperator http://127.0.0.1:50884/index.html#/contentExpertise

Question : Is there a way to remove/clean # tag from url.. to show the url path like below:

http://127.0.0.1:50884/index.html/home

http://127.0.0.1:50884/index.html/contentExpertise

I tried html5mode but it give angular error in console.

Error: [$location:nobase] .5.0-rc.2/$location/nobase
K/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:6:421
pf/this.$get<@http://127.0.0.1:50884/js/angular-v1.5.min.js:110:96
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
s/</<@http://127.0.0.1:50884/js/angular-v1.5.min.js:52:121
n@http://127.0.0.1:50884/js/angular-v1.5.min.js:7:364
s/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:52:90
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
e/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:38:458
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
K@http://127.0.0.1:50884/js/angular-v1.5.min.js:71:447
la@http://127.0.0.1:50884/js/angular-v1.5.min.js:60:266
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:229
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
N@http://127.0.0.1:50884/js/angular-v1.5.min.js:56:263
Ac/c/</<@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:99
sf/this.$get</m.prototype.$eval@http://127.0.0.1:50884/js/angular-v1.5.min.js:140:363
sf/this.$get</m.prototype.$apply@http://127.0.0.1:50884/js/angular-v1.5.min.js:141:83
Ac/c/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:57
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
Ac/c@http://127.0.0.1:50884/js/angular-v1.5.min.js:20:1
Ac@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:274
de@http://127.0.0.1:50884/js/angular-v1.5.min.js:20:83
@http://127.0.0.1:50884/js/angular-v1.5.min.js:306:372
n.Callbacks/i@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27060
n.Callbacks/j.fireWith@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27828
.ready@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29619
J@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29804
"

Please help

My url looks like this http://127.0.0.1:50884/index.html#/home

Question : Is there a way to remove/clean # tag from url.. to show the url path like below:

http://127.0.0.1:50884/index.html/home

http://127.0.0.1:50884/index.html/contentExpertise

I tried html5mode but it give angular error in console.

Error: [$location:nobase] http://errors.angularjs/1.5.0-rc.2/$location/nobase
K/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:6:421
pf/this.$get<@http://127.0.0.1:50884/js/angular-v1.5.min.js:110:96
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
s/</<@http://127.0.0.1:50884/js/angular-v1.5.min.js:52:121
n@http://127.0.0.1:50884/js/angular-v1.5.min.js:7:364
s/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:52:90
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
e/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:38:458
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
K@http://127.0.0.1:50884/js/angular-v1.5.min.js:71:447
la@http://127.0.0.1:50884/js/angular-v1.5.min.js:60:266
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:229
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
N@http://127.0.0.1:50884/js/angular-v1.5.min.js:56:263
Ac/c/</<@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:99
sf/this.$get</m.prototype.$eval@http://127.0.0.1:50884/js/angular-v1.5.min.js:140:363
sf/this.$get</m.prototype.$apply@http://127.0.0.1:50884/js/angular-v1.5.min.js:141:83
Ac/c/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:57
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
Ac/c@http://127.0.0.1:50884/js/angular-v1.5.min.js:20:1
Ac@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:274
de@http://127.0.0.1:50884/js/angular-v1.5.min.js:20:83
@http://127.0.0.1:50884/js/angular-v1.5.min.js:306:372
n.Callbacks/i@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27060
n.Callbacks/j.fireWith@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27828
.ready@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29619
J@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29804
"

Please help

Share Improve this question asked Mar 1, 2016 at 8:07 Sam 5013 gold badges9 silver badges23 bronze badges

See this :) stackoverflow./questions/28388860/… – Bhojendra Rauniyar Commented Mar 1, 2016 at 8:09
use this :: $locationProvider.html5Mode(true); – Mahesh K Commented Oct 24, 2016 at 5:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 11

By default, AngularJS will route URLs with a hashtag. It is very easy to get clean URLs and remove the hashtag from the URL using $locationProvider in AngularJS. You need to inject $locationProvider into your config section of module and use the HTML5 History API like this. e.g.

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })
        .state('about', {
            url: '/aboutus',
            templateUrl: 'aboutus.html'   
        });
    $locationProvider.html5Mode(true);
});

Also don't forget to put a <base href="/"> tag inside index.html section.

In order for html5 mode to work you must define a baseurl like:

<base href="whatever/" />

See w3schools for more information: http://www.w3schools./tags/tag_base.asp

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to remove hash tag (#) from url address in ui-router - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)