Angular SPA + Jersey + SpringMVC 整合应用

Posted by zhida.liao on February 1, 2015

Angular SPA 单页面应用和MVC控制器的整合,会有一个疑问,SPA中点击链接的跳转,是经过SPA的路由,还是直接被SpringMVC拦截了? ANGULAR SPA + JERSEY + SPRINGMVC 的框架主要有这样的分工:

  • ANGULAR SPA:页面的切换跳转,每个页面采用异步Ajax的方式获取内容展示
  • JERSEY: 为SPA页面提供Restful的API接口
  • SpringMVC : 为需要独立出来的页面作控制器

Jersey配置:web.xml

<servlet>
    <servlet-name >DGMSApplication </servlet-name >
    <servlet-class> org.glassfish.jersey.servlet.ServletContainer </servlet-class >
    <init-param >
        <param-name >javax.ws.rs.Application </param-name >
        < param-value> com.drivergroup.web.rest.DGMSApplication </param-value >
    </init-param >
    <load-on-startup >1 </load-on-startup >
</servlet >
<servlet-mapping >
    <servlet-name >DGMSApplication </servlet-name >
    <url-pattern >/api/* </url-pattern >
</servlet-mapping >

SpringMVC配置:web.xml文件配置

<servlet>
         <servlet-name>dgmsServlet</servlet-name>
         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
         <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:dgms-servlet.xml</param-value>
         </init-param>
         <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
        <servlet-name>dgmsServlet</servlet-name>
        <url-pattern>/</url-pattern>
</servlet-mapping>

SpringMVC控制器

@Controller
@RequestMapping({"/article"})
public class ClientController {
     @RequestMapping(value = "article.html", method = RequestMethod.GET)
     public String  getArticleTest() {
          return "views/hello"; 
     }
}
<!-- 配置freeMarker视图解析器, .htm后缀的用freemarker解析 --> 
<bean id="freemarkerViewResolver" class="com.gelonghui.springmvc.GlhFreemarkerViewResolver"> 
    <property name="contentType" value="text/html; charset=utf-8"/> 
    <property name="prefix" value="/"/>    
    <property name="suffix" value=".htm" />
</bean>

Angular SPA路由配置: route.js

GLHApp.config (['$routeProvider', '$locationProvider' , function ($routeProvider, $locationProvider) {
    $routeProvider.when('/' , {
        templateUrl: 'views/homeBeta.html'
    }).when('/article/detail', {
        templateUrl: '/article/detail.html'
    }).when('/article/test', {
        templateUrl: '/article/article.html'
    })otherwise({ redirectTo : '/' });
}]);

配置完成之后看下面的示例图:

image

先回答第一个问题:SPA中点击链接的跳转先经过路由还是拦截器,主要看链接的形式,Angular SPA会把/#/形式的链接先进行路由中转处理,除了/#/形式的链接会按正常流程进入拦截器处理 这个时候如果链接不符合Jersey配置的话就会进入SpringMVC,SpringMVC没有找到对应的请求就会返回404。

<a ng-href=”#/article/detail”>Angular SPA</a>
视图:/view/details.html
<a ng-href=”/api/article/1″>Jersey</a>
视图:{status:200 result:{…}} //json格式的数据
<a ng-href=”/article/article.html”>SpringMVC</a>
视图:/views/hello.htm

我们还可以实现Angular SPA和MVC控制器耦合的情况: 链接以/#/开头,经过路由route.js文件,然后跳转到SpringMVC处理完成后返回一个试图显示 image

转载请注明出处 作者:zhida 来源:paraller’s blog

参考网站:

Java Spring Mvc Single Page App with Upida/Jeneva (Frontend/AngularJS)