转载请注明出处 http://www.paraller.com
原文排版地址 点击获取更好阅读体验

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 : '/' });
}]);

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

先回答第一个问题：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处理完成后返回一个试图显示

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

参考网站:

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