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项目的根路径中

923b14ea29f5fd7a08029ea0dc641a8c.png

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值