Angular - 如何停止使用散列链接进行导航？

Question

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

我使用 yeoman angular 生成器搭建了一个项目。我的导航中有这个：

    <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>

当我尝试点击“关于”页面时页面中断。这是 app.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 */);    
        }
    ]);

Reference for $locationProvider

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

Angular - 如何停止使用散列链接进行导航？

Angular - how to stop using hash links to navigate?

navigation

angularjs