javascript - 无法从 Angular url 中删除 #

Question

当我有这样的代码时:

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

我可以通过以下网址获取电话列表:http://localhost:8000/app/#/phones

但是，要从 url 中删除 #。如果我将上面的代码替换为:

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({
         enabled: true,
         requireBase: false
    });
  }]);

然后我转到 url:http://localhost:8000/app/phones/ 我看到了 /app/phones/的索引而不是我的正常网页。知道我哪里出错了吗？

Answer 1

如果您在 Packages.json 中查找 angular-phonecat应用程序中，您将看到 "start": "http-server -a 0.0.0.0 -p 8000"。这将启动一个基本节点模块 http-server .

http-server is a simple, zero-configuration command-line http server.

它没有提供太多选项。但是，您可以使用 -P (注意大小写)来创建代理。

-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

因此将起始行更改为 "start": "http-server -a 0.0.0.0 -p 8000 -P http://localhost:8000/app/" 将适用于测试至少。

当您向 http://localhost:8000/app/phones 发出请求时，服务器会将其代理到您的 /app/ 目录，因为它无法解决。应用加载后，客户端路由器将启动，并使用 HTML5 重写将您重定向到请求的页面。

对于 Angular-phonecat 应用程序，它在设计时并未考虑到 HTML5Mode，并且它包含的物理目录与示例中创建的虚拟路由冲突。无论您将应用程序部署到哪个服务器，HTML5Mode 都希望没有与您的虚拟路由匹配的物理目录，因为这些路径会在 Angular 应用程序干预之前由服务器解析。