javascript - 如何通过删除 "#"使 Angular URL 变得更清晰？

Question

我有一个网站，目前有这样的 URL

http://www.bruxzir.com/cases-bruxzir-zirconia-dental-crown/

我正在评估 Angular 并且到目前为止已经开始使用 angular-seed 的应用程序.但现在我的 URL 看起来像这样

http://localhost:8000/index.html#/cases-bruxzir-zirconia-dental-crown/ 

我已经将 meteor 用于 SPA，并且具有兼容的 URL 结构。那么我怎样才能用 Angular 做到这一点呢？基本上从 URL 中删除 index.html#。这是我的代码。

index.html - 标题中的链接

<li><a href="#/cases-bruxzir-zirconia-dental-crown/">Cases</a></li>

app.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'home'});
  $routeProvider.when('/features-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/features.html', controller: 'features'});
  $routeProvider.when('/science-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/science.html', controller: 'science'});
  $routeProvider.when('/video-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/videos.html', controller: 'videos'});
  $routeProvider.when('/cases-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/cases.html', controller: 'cases'});
  $routeProvider.when('/testimonials-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/testimonials.html', controller: 'testimonials'});
  $routeProvider.when('/authorized-bruxzir-labs-zirconia-dental-crown/', {templateUrl: 'partials/labs.html', controller: 'labs'});
  $routeProvider.otherwise({redirectTo: '/home'});
}]); 

Answer 1

只需使用 HTML5 mode由 $locationProvider 提供:

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);  //adding this line
  $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'home'});
  $routeProvider.when('/features-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/features.html', controller: 'features'});
  $routeProvider.when('/science-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/science.html', controller: 'science'});
  $routeProvider.when('/video-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/videos.html', controller: 'videos'});
  $routeProvider.when('/cases-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/cases.html', controller: 'cases'});
  $routeProvider.when('/testimonials-bruxzir-zirconia-dental-crown/', {templateUrl: 'partials/testimonials.html', controller: 'testimonials'});
  $routeProvider.when('/authorized-bruxzir-labs-zirconia-dental-crown/', {templateUrl: 'partials/labs.html', controller: 'labs'});
  $routeProvider.otherwise({redirectTo: '/home'});
}]);