javascript - 重新加载页面或手动键入 URL，如 "localhost/mysite.com/contact"在 Angular js 中在服务器上给出错误的 "Not Found"(404 错误)

Question

重新加载页面或手动输入“localhost/mysite.com/contact”等 URL 会在服务器上给出错误的“未找到”(404 错误)。这是因为 MVC 不知道 Angular 路由，并且通过 MVC 模式，它将查找 MVC 路由路径中不存在的“联系人”的 MVC 页面。我认为通过将所有链接重定向到索引页面，.haccess 文件有一个解决方案，但这不是一个好主意。

我已经在 head 中向应用程序添加了一个 baseURL 常量。js部分如下:

 app.config(function($routeProvider,$locationProvider) {
    $routeProvider.
    when("/contact", {
        templateUrl : "partial/contact.html"
    }).
    when("/aboutus", {
        templateUrl : "aboutus.html"
    }).
    when("/service", {
        templateUrl : "service.html"
    }).
    otherwise({
      redrictTo: "index.html"
    })

     $locationProvider.html5Mode(true);
});

当我通过手动输入 URL 转到联系人页面时，如何解决 Angular 问题以获取正确的页面 (localhost/mysite.com/contact)。

Answer 1

Angular 路由，在 HTML 5 模式下，使用 the history API在幕后。

历史 API 旨在让您:

1. 加载页面
2. 运行 JavaScript 来更改页面内容，使其成为不同的页面
3. 使用 pushState 更改浏览器中的 URL，使其成为该页面的 URL

想法是在第 2 步中使用 JavaScript 应该比从服务器加载整个页面更快(或以其他方式更好)。

This is because MVC does not know about angular routing and by MVC pattern it will look for an MVC page for 'contact' which does not exist in MVC routing path

这是你的问题。历史 API 旨在让您的服务器端代码应该知道这一点。

如果用户直接转到第二个 URL，那么服务器应该能够直接向他们展示该页面。即它不应该抛出 404，也不应该加载主页然后用 JavaScript 转换它。

JavaScript 是 unreliable .遵循Progressive Enhancement的原则和 Unobtrusive JavaScript

tl;dr:您需要编写服务器端代码来反射(reflect)您的客户端代码。

如果您不想为每个页面使用服务器可以识别的 URL，则不要使用 $locationProvider.html5Mode(true); 并回到糟糕的过去hashbangs .