angular 如何在index html 页面包含子页面_Angular-项目在web容器中部署方式

1、单页面项目在web容器中的问题

单页面的项目有一个重要的特性是页面没有刷新的，虽然浏览器的url会发生变化，但是页面也没有执行刷新的动作。在Angular 中，所有的页面都是在index.html 中的，如果在web容器中，当前页面url切换到/app/user 进行了刷新，此时web容器本身没有找到/app/user/对应的资源，就会出现404错误。

2、问题解决的基本思路

拦截Angular项目的根路径，此路径请求强制转发到 index.html 下。

3、项目示例

Servlet配置

public class AngularServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                request.getRequestDispatcher("../index.html").forward(request, response);
    }
}
<servlet>
    <servlet-name>AngularServlet</servlet-name>
    <servlet-class>com.apptalking.ee.controller.servlet.AngularServlet
        </servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>AngularServlet</servlet-name>
    <url-pattern>/app/*</url-pattern>
  </servlet-mapping>

Angular的项目的根路径都在/app/ 下，所有的请求都转发到 index.html 中。 转发的相对路径参考 《request.getRequestDispatcher 相对路径源码讲解》

Angular项目路径的

Angular项目直接放在 webapp中，即web项目的根路径中

修改index.html 中的base，指定到项目的context下，使用绝对路径，这样资源加载就不会有问题 最后的 / 一定要写。 index.html 页面也可以使用jsp页面代替，这样就可以动态的获取项目的context path。