如何通过删除"#"使 Angular URL 更干净？

Question

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

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

我正在评估角度，到目前为止，我已经开始使用角度种子的应用程序。但是现在我有看起来像这样的网址

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

我已经将 meteor 用于 SPA，并且具有兼容的 URL 结构。那么我如何使用 Angular 做到这一点呢？基本上摆脱了URL中的index.html#。这是我的代码。

索引.html - 标头中的链接

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

应用.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

只需使用 $locationProvider 提供的 HTML5 模式：

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