Angular ui-router將hash添加到url

Question

我正在為角度和角度ui路由器的應用程序設置腳手架。 我有它的工作，但似乎是在我的網址中添加一個哈希（我在localhost上運行dev） localhost：9000 /＃/ test 。 當我登陸主頁面時，它只是localhost：9000 ，它仍然提供主視圖內容。 如果可能的話我想擺脫哈希。

所以這是我的設置：

在我的身體中的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>

在我的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'
});
});

因此，當我降落時，它很好，但是當我開始使用我設置的導航時，它會將散列添加到網址中，如果可能的話，不希望使用它們。 謝謝！

Answer 1

包含$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);
    });

我也有一個otherwise在那里，所以如果它找不到指定的路線，它將只是默認返回：

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('/');
    });

Answer 2

將$ 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);

});

確保調整.htaccess來處理此問題（重寫回root）。

Answer 3

有一個替代html5Mode 。 但它有它的缺點。

定義ui-router狀態時， 不需要url選項 。 從該文件：

如果為這些子狀態添加書簽沒有意義，則可以創建一些沒有URL的子狀態。 狀態機像往常一樣在無URL狀態之間轉換，但在完成時不更新URL。 您仍然可以獲得狀態轉換的所有其他好處，例如參數，解析和生命周期鈎子。

如果您不需要為狀態提供URL以便用戶可以為這些狀態添加書簽，則可以省略url選項。 網址不會更改。