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>

当我尝试点击“关于”页面时，页面会中断。这是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 - 如何停止使用哈希链接进行导航？

1 个答案: