重新加载页面或手动键入URL，例如“localhost / mysite.com / contact”;在角度js中在服务器上给出错误的“未找到”（404错误） [英] Reloading the page or manually type URL like "localhost/mysite.com/contact" gives wrong "Not Found"(404 error) on the server in angular js

问题描述

重新加载页面或手动键入localhost / mysite.com / contact之类的URL会在服务器上显示错误的Not Found（404错误）。这是因为MVC不知道角度路由，并且通过MVC模式，它将寻找MVC路由路径中不存在的联系的MVC页面。我认为.haccess文件有一个解决方案，可以将所有链接重定向到索引页面，但这不是一个好主意。

Reloading the page or manually type URL like "localhost/mysite.com/contact" gives wrong "Not Found"(404 error) on the server. 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. I think there is a solution by .haccess file by redirect all links to the index page, but it, not a good idea.

我已经添加了一个baseURL常量应用于头部。
和js部分如下：

I already add a baseURL constant to the application in head. and the js part is below:

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

如何解决问题角度以获取正确的页面（localhost / mysite.com / contact）当我通过手动输入URL进入联系页面时。

推荐答案

角度路由，在HTML 5中模式，使用历史API 。

Angular routing, in HTML 5 mode, uses the history API under the hood.

历史API旨在让您：

1. 加载页面


2. 运行JavaScript以更改页面内容的方式使其成为不同的页面


3. 使用 pushState 更改浏览器中的URL，使其成为该页面的URL

1. Load a page
2. Run JavaScript to change the content of the page in such a way that it becomes a different page
3. Use pushState to change the URL in the browser so it is the URL of that page

想法是使用JavaScript进行步骤2应该比从服务器加载整个页面更快（或以其他方式更好）。

The idea being that using JavaScript for step 2 should be faster (or better in some other way) than loading the whole page from the server.

这是因为MVC不知道关于角度路由d通过MVC模式，它将查找MVC路由路径中不存在的联系人的MVC页面

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的设计使您的服务器端代码应该知道这一点。

This is your problem. The history API is designed so that your server side code should know about that.

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

If a user went directly to the second URL, then the server should be able to present them with that page directly. i.e. it shouldn't throw a 404 and it shouldn't load the homepage and then transform it with JavaScript.

JavaScript是不可靠。遵循渐进增强和不引人注目的JavaScript

JavaScript is unreliable. Follow the principles of Progressive Enhancement and Unobtrusive JavaScript

tl; dr：您需要编写服务器端代码来镜像您的客户端边码。

如果您不想使用服务器可以识别每个网页的网址，请不要使用 $ locationProvider.html5Mode（true）; 然后回到 hashbangs 。

If you don't want to use URLs that the server can recognise for each page, then don't use $locationProvider.html5Mode(true); and go back to the bad old days of hashbangs.

这篇关于重新加载页面或手动键入URL，例如“localhost / mysite.com / contact”;在角度js中在服务器上给出错误的“未找到”（404错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！