AngularJs 路由提供者 404

下面的代码来自 AngularJs 教程，我稍作修改。我希望从 url 中删除哈希值。我实际上成功了，但现在我有其他问题。

当我使用链接本地主机时，它工作得很好并将我重定向到本地主机/电话。但万一我尝试直接链接 localhost/phones，浏览器会抛出 404 错误。为什么会这样？

Code:

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);

phonecatApp.config(['$routeProvider', '$locationProvider' ,function($routeProvider,       $locationProvider) {
$routeProvider
    .when('/phones', {
        templateUrl : 'partials/phone-list.html',
        controller : 'PhoneListCtrl'
    }).
    when('/phones/:phoneId', {
        templateUrl : 'partials/phone-detail.html',
        controller : 'PhoneDetailCtrl'
    }).
    otherwise({
        redirectTo : '/phones'
    });

    $locationProvider.html5Mode(true).hashPrefix('!');
}])

为此，您必须在服务器端处理 url 重写。

根据您的服务器，您必须添加：

在 apache 中（例如 .htaccess）：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule !\.\w+$ index.html [L]
</IfModule>

如果您使用 grunt 和 grunt-contrib-connect，只需使用以下正则表达式添加中间件（modRewrite）：

connect: {
  options: {
      port: 9002,
      hostname: 'localhost' // put here any ip if you want external access
  },

  dev: {
      options: {
          middleware: function(connect) {
              return [
                  //modRewrite is used to handle properly angularjs' html5 mode
                  modRewrite([
                      '^[^\\.]*$ /index.html [L]'
                  ])
              ]
          }
      }
  }
}

ps：在这种情况下，您的主入口点必须是index.html。

pps：您可能需要针对特定​​情况调整此正则表达式。