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

但是，要从网址中删除＃。如果我用这个替换上面的代码：

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

我转到网址：http://localhost:8000/app/phones/我看到Index of /app/phones/而不是我的普通网页。我知道哪里出错了？

Answer 1

如果您查看Packages.json应用的"start": "http-server -a 0.0.0.0 -p 8000"，则会看到-P。这将启动基本节点模块angular-phonecat。

http-server是一个简单的零配置命令行http服务器。

它没有提供太多选项。但是，您可以使用"start": "http-server -a 0.0.0.0 -p 8000 -P http://localhost:8000/app/"（注意案例）来创建代理。

-P或--proxy将所有无法在本地解析的请求代理到给定的URL。例如：-P http-server

因此，将起始行更改为http://localhost:8000/app/phones至少可以用于测试。

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

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

Answer 2

好。所以我以错误的方式解决了这个问题。在Angular Tutorial之后他们使用了npm http-server而不是apache服务器。因此，要启用html5配置，在这种情况下必须配置这个npm http服务器服务器 - 我找不到任何记录它的地方。

所以，我从npm http-server转移到apache服务器并遵循：Server configurations for html5。

同样底线是：在使用官方教程中提供的http-server的基本模块时，不要浪费时间启用html5模式。

无法从Angular网址中删除＃

2 个答案: