如何使用 Angular 1.5 正确路由 SPA？

Question

我是角度新手。我创建了一个博客来显示我的个人资料。 在我的网站中，我有几个组件，我的 app.module 有一个路由配置，如下所示：

app.config(function($locationProvider, $routeProvider){
  $locationProvider.html5Mode({
    enabled:true,
    requireBase: false
  })

  $routeProvider.
    when("/", {
      template: "<research-overview></research-overview>"
    }).
    when("/research-interests", {
      template: "<research-interests></research-interests>"
    }).
    otherwise({
      redirectTo: "/"
    })
 });

这是我的组件的一个示例：

angular.module('researchOverview', [])
  .component('researchOverview', {
     templateUrl: '/templates/research-overview.html',
});

我尝试使用 python -m SimpleHttpServer 在本地运行服务器 这样我就可以使用浏览器访问我的本地网站localhost:8000，当我单击主页上的链接时，页面已正确加载。但是，当我最初使用不同的 url（例如localhost:8000/testing）访问我的网站时，Angular 路由似乎无法正常工作。 我得到了这个错误，

如何设置路由器，以便这些 url 可以重定向到我的主页？

Answer 1

鉴于您已启用 html5 模式，我认为您可能需要设置您的服务器，以便无论路径如何，它都会返回您的 index.html 文件。

例如，当您的服务器在 localhost:8000/testing 收到对资源的​​请求时，它将返回 index.html。

来自 AngularJS 文档：

使用这种模式需要在服务器端重写 URL，基本上你 必须重写所有指向应用程序入口点的链接 （例如 index.html）。要求标签对此也很重要 情况，因为它允许 Angular 区分 作为应用程序基础的 url 和应处理的路径 由应用程序。