Question

下面的代码是来自AngularJs的教程，我对它进行了一些修改。我希望从url中删除哈希。我实际上成功了，但现在我还有其他问题。

当我使用链接localhost时，它工作正常并将我重定向到localhost / phones。但万一，我尝试使用直接链接localhost / phones，浏览器会抛出404错误。为什么会这样？

代码：

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

Answer 1

你必须处理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：您可能需要针对特定情况调整此正则表达式。

AngularJs routeProvider 404

1 个答案: