Angular ui-router将hash添加到url

I am setting up a scaffold for an app with angular and angular-ui-router. I have it working however it seems to be adding a hash into my url (I'm running dev on localhost) localhost:9000/#/test. When I land on the main page it's just localhost:9000 and it still serves the main view content. I would like to get rid of the hash if possible.

我正在为角度和角度ui路由器的应用程序设置脚手架。我有它的工作，但似乎是在我的网址（我在localhost上运行dev）localhost：9000 /＃/ test添加哈希。当我登陆主页面时，它只是localhost：9000，它仍然提供主视图内容。如果可能的话，我想摆脱哈希。

So here is my setup:

所以这是我的设置：

In my index.html in the body I just have my nav and then the ui-view under that:

在我身体的index.html中，我只有导航，然后是ui-view：

 <div class="row">
   <ul class="nav navbar-nav">
      <li><a ui-sref="index">Home</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
  </div>

  <div ui-view=""></div>

and in my app.js I just have:

在我的app.js我只有：

angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
    url: '',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
})
.state('test', {
    url: '/test',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
});
});

So when I land, it's fine, but when I start using the nav I have set up, it adds the hashes to the url, would prefer not to have them if possible. Thanks!

因此，当我着陆时，它很好，但是当我开始使用我设置的导航时，它会将哈希添加到网址中，如果可能的话，不希望使用它们。谢谢！

3 个解决方案

#1

Include $locationProvider and do $locationProvider.html5Mode(true); :

包含$ locationProvider并执行$ locationProvider.html5Mode（true）; ：

angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

        $locationProvider.html5Mode(true);
    });

I also have an otherwise in there as well, so that if it can't find a specified route, it will just default back:

我也有一个否则在那里，所以如果它找不到指定的路线，它将只是默认返回：

angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider, $urlRouterProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

        $locationProvider.html5Mode(true);
        $urlRouterProvider.otherwise('/');
    });

#2

Inject $locationProvider into your config and set html5mode to true:

将$ locationProvider注入您的配置并将html5mode设置为true：

angular.module('playApp', [
    'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
    $stateProvider
        .state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

    $locationProvider.html5Mode(true);

});

Make sure you adjust your .htaccess to handle this (rewriting back to root).

确保调整.htaccess来处理此问题（重写回root）。

#3

There is an alternative to html5Mode. But it has its drawbacks.

有一个替代html5Mode。但它有它的缺点。

When defining ui-router states, the url option is not required. From that documentation:

定义ui-router状态时，不需要url选项。从该文件：

You might create some child states without URLs, if it doesn’t make sense to bookmark those child states. The state machine transitions between url-less states as usual, but does not update the url when complete. You still get all the other benefits of a state transition such as parameters, resolve, and lifecycle hooks.

如果没有为这些子状态添加书签，则可能会创建一些没有URL的子状态。状态机像往常一样在无URL状态之间转换，但在完成时不更新URL。您仍然可以获得状态转换的所有其他好处，例如参数，解析和生命周期钩子。

If you don't need to provide a URL for a state so that users can bookmark those states, you can omit the url option. The URL won't change.

如果您不需要为状态提供URL以便用户可以为这些状态添加书签，则可以省略url选项。该URL不会更改。

#1