角度 - 如何停止使用哈希链接进行导航

Question

请耐心等待，我是Angular的新手。

我使用Yeoman角生成器来搭建一个项目的脚手架。我的导航中有这个：

    <ul class="nav nav-pills pull-right">
      <li class="active"><a ng-href="/">Home</a></li>
      <li><a ng-href="#/about">About</a></li>
      <li><a ng-href="#">Contact</a></li>
    </ul>

我

不喜欢在那里有哈希值，因为当网站上线时，我不希望链接看起来像http://example.com/#/about。但是如果我将上述内容更改为：

<a ng-href="/about">About</a></li>

当我尝试点击"关于"页面时，页面中断。以下是应用程序中的内容.js：

angular
  .module('wowApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Answer 1

您需要

配置$locationProvider才能启用HTML5模式。

angular
    .module('wowApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch'
    ])
    .config([
        '$locationProvider',
        '$routeProvider',
        function ($locationProvider, $routeProvider) {
            // Set HTML 5 mode to true to disable #
            // in push states
            $locationProvider.html5Mode(true);
            // Setting HTML5 mode to true also requires
            // you to set a base URL for the application
            // or disable `requireBase`. If you don't need base
            $locationProvider.html5Mode({
                enabled : true,
                requireBase : false
            });

            $routeProvider.when(/* route logic as normal */);    
        }
    ]);

$locationProvider参考

现在，您可以从锚点 href 值中删除 #。