AngularJS HTML5模式 - 如何直接连接服务器没有具体的变化工作？ [英] AngularJS HTML5 Mode - How do direct links work without server specific changes?

问题描述

的注：这个问题还可以阅读：的

如何支持hashbang无客户端的MVC框架的书签
  在Java中。

How to support bookmarking of hashbang-less client side mvc frameworks in Java.

我转换使用主题标签来一个是 html5mode 角应用。我已成功设置

I am transitioning an angular app that uses hashtags to one that is html5mode. I have successfully set

$locationProvider.html5Mode(true);

和从登陆页面（index.html的）各个环节工作的罚款。

And all links from the landing page (index.html) work fine.

问题是，如果不完整的URL直接引用，我得到一个404，自然，因为服务器端点定义不连接到客户端定义的路由信息​​。

The problem is, if partial urls are referenced directly, I get a 404, naturally, since the server endpoint definitions aren't coupled to client side-defined routes.

因此​​，没有HTML5，我们得到的非搜索引擎友好的hashbangs，但它不能书签什么比登陆页面其他（的页面，白手起家角）。

So without HTML5 we get non-SEO friendly hashbangs, but with it we cannot bookmark anything other than the landing page (the page that bootstraps angular).

为什么它的工作原理，如果请求的默认登录页面（index.html的）第一个，即HTPP：//mydomain.com/：

Why it works if requesting default landing page (index.html) first, ie htpp://mydomain.com/ :

1. 浏览器从服务器请求的index.html


2. 服务器的index.html返回和浏览器加载角框架


3. 网址变更被发送到客户端侧的路由器和s加载适当部分/

为什么如果（即） http://mydomain.com/foo 是直接从浏览器请求它不工作：

Why it doesn't work if (ie) http://mydomain.com/foo is requested directly from the browser:

1. 浏览器从服务器请求MYDOMAIN / foo中。


2. 资源不存在


3. 服务器返回404

有什么东西从这个故事中失踪，我只是不知道是什么。这里是仅有的两个答案，我可以看到...

Something is missing from this story, I just don't know what. Here are the only two answers I can see...

• 这是由设计。这是它是如何工作的？用户必须登陆客户端MVC框架的引导页面（通常是index.html的），然后从那里导航。这是不理想的状态，因为无法保存，也没有办法......书签不提爬行。


• 服务器解决方案。这是与服务器端把戏工作围绕？例如，在所有请求，返回index.html，然后立即打电话给路由器加上额外的内容。如果是这样，这是针对AngularJS完全是客户端和看起来像一个黑客攻击的目标。

• It's by design. Is this how it is supposed to work? That users must always land on the client MVC framework's bootstrap page (usually index.html), and then navigate from there. This is not ideal because state cannot be saved and there is no way to bookmark... not to mention crawling.
• Server solution. Is this worked around with a server side trick? For example, on all requests, return index.html and immediately call router with additional context. If so, this is against the objective that AngularJS is completely client-side and seems like a hack.

推荐答案

的 AngularJS文档在做其实提到这一点的

The AngularJS documentation does in fact mention this

服务器端使用该模式需要URL重写，服务器端，
  基本上你不得不重写所有的链接入口点的
  应用程序（例如，index.html）

Server side Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

在此情况下，一个基于Java的解决方案是告诉服务器的所有URL映射到index.html的。这可以在任何HTTP服务器或容器进行。我实现了这个使用Java / SERVET，因为我想我的应用程序是HTTP服务器无关的（即与阿帕奇nginx的，或Tomcat / JBoss的唯一的）。

In this case, one Java-based solution is to tell the server "map all urls to index.html." This can be done in any HTTP Server or container. I implemented this using Java/Servet since I want my application to be HTTP server agnostic (ie Apache versus NginX, or Tomcat/JBoss only).

在web.xml中：

  <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
      <servlet-name>StaticServlet</servlet-name>
      <jsp-file>/index.jsp</jsp-file>
  </servlet>

  <servlet-mapping>
      <servlet-name>StaticServlet</servlet-name>
      <url-pattern>/app</url-pattern>
  </servlet-mapping>

和简单的index.jsp是这样的：

And index.jsp simply looks like:

<%@ include file="index.html" %>

和添加以下的index.html内的标签：

And add the following to the tag within index.html:

<base href="/app" />

这篇关于AngularJS HTML5模式 - 如何直接连接服务器没有具体的变化工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！