原文排版地址:Angular SPA + Jersey + SpringMVC 整合应用

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处理完成后返回一个试图显示

参考网站:

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

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

Angular SPA + Jersey + SpringMVC 整合应用的更多相关文章

  1. HTML5 WebSocket实现点对点聊天的示例代码

    这篇文章主要介绍了HTML5 WebSocket实现点对点聊天的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. 关闭iOS原生MPVolumeView音频路由菜单

    我正在使用MPVolumeView允许用户在使用我的应用程序时控制他喜欢的音频路径.该代码显示了该视图:当用户点击音频路由按钮时,会出现一个带有可用选项的菜单.问题:显示音量视图的屏幕可能需要隐藏,因为我的应用程序处理各种事件,我想同时隐藏音频路由菜单我的问题:有没有人知道是否可以手动关闭MPVolumeView的音频路由选择菜单而无需用户按下取消按钮?解决方法在iOS8上,您可以使用以下使用私有API的代码

  3. iOS:使用蓝牙音频输出(kAudioSessionProperty_OverrideCategoryEnableBluetoothInput)AudioSession

    >如果有可用的A2DP设备,我的音频路由将始终自动切换到kAudioSessionOutputRoute_BluetoothA2DP路由.如何防止此路线更改?我希望你们中的一些人可以帮助我解决这些问题.这对我对CoreAudio的整体理解,特别是AudioSession框架,真的有帮助.解决方法AudioSession是一项棘手的业务.1.BluetoothHFPaudiooutputisonlypossibleincaseofAudioSessionkAudioSessionCategory_PlayA

  4. Swift3.0 Swift2.3 获取IP地址 获取网关地址

    最近需要在Swift项目中获取路由器的网关地址,在网上找了半天的代码也没发现太多有价值的东西,而且大多都是OC代码,很少有Swift的相关代码,只找到了一个通过Swift代码获取设备IP的代码,最后实在没办法只能曲线救国了。下面上代码:思路就是把获取到的设备IP地址的最后一位手动修改为”1”,前面三位不需要修改,比如我的手机ip地址是192.168.31.212,所以网关地址就是192.168.31.1。最近苹果更新了Swift3.0,这里更新一下代码。

  5. Swift3.0服务端开发(二) 静态文件添加、路由配置以及表单提交

    今天博客中就来聊一下Perfect框架的静态文件的添加与访问,路由的配置以及表单的提交。也就是webroot的文件目录变地方了。后方的尾随闭包是对响应的处理。action的地址就是我们在服务器端配置的路由地址“127.0.0.1:8181/login”,而表单提交的方式是POST。

  6. Swift Web 开发之 Vapor - 路由二

    路由参数Vapor提倡使用类型安全的路由参数来接收数据,我们可以在路由方法中使用Swift类型来指定参数类型,Vapor会在内部解析并将参数返回给闭包以供使用,非常方便。Swift中处处有协议,路由参数也是如此,我们所见例子中的Int其实就是Vapor给实现了StringInitializable协议,当然String也已经默认实现。throw另外一大特性就是可以直接在路由中抛出异常,我们可以throw任何遵从Swift.Error协议的对象,当然Vapor已经为我们封装好了几个常用的Error来方便我们

  7. swift – Singleton模式和正确使用Alamofire的URLRequestConvertible

    如果是这样,我该如何设置经理的基础?此外,如果我使用这个管理器//这可以与上面显示的路由器结构一起工作?我是Alamofire图书馆的新手,迅速。然而,当您获得超过6或7例的情况下,这很快就会变得很快。首先,您的模型对象需要符合RouterObject协议。最后一个问题是您无法直接在Routerenum中存储baseURL或OAuthToken。但是,如果您只是使用默认会话触发网络,那么sharedInstance可能就足够了。

  8. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

  9. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  10. Android VPNService路由排除

    我正在使用OpenVPN和ICS附带的新VpnServiceAPI有没有办法从VPN隧道中定义IP地址的排除?

随机推荐

  1. Ajax+SpringMVC requestBody

    ajax+SpringMVC经验证,上文写的是比较正确的,所以转过来保存一下.传JSON对象前端后端传JSON字符串+@RequestBody接收前端后端

  2. H5FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩。总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有HTML5的FormData,AJAX,SpringMVC。注意这个upload.js是自己写的,里面那个ajaxFileUpload并不是jQuery提供的那个上传插件的方法。服务端接口写法:@ResponseBody@RequestMappingpublicvoidaddPicthrowsIOException{System.out.println;response.getWrite

  3. Ajax异步提交List对象,SpringMvc如何接收?

    Springmvc的一个问题一直被广大开发者所诟病,就是在list对象的转换上一直并不是特别好用,网上很多解决方法关于不同的表单提交方式这里就不多说了,只介绍下ajax方式提交list对象的方法。比如你要通过ajax传递下面一段数据到controller:如果像下面这样写肯定是无法传递到后端的:这样肯定会报错User找不到之类的,那么怎么解决呢?

  4. ajax json异步springmvc http请求返回状态码为406的解决

    是因为缺少json相关jar包,网上很多人只是给出了前两个jar,其实不全,依旧406,应该给出四个

  5. AJAX和SpringMVC交互

    AJAX利用jquerySPRING

  6. ajax与springmvc传参方式总结

    若传递的是数组对象,需要用第二种方式,否则失败。①前台$.ajax;后台:@RequestMapping@ResponseBodypublicStringdel{return"";}如果不加Traditional,通过观察浏览器中发送的请求,可以发现参数如下:newArray[]:delArray[]:可以看到,参数的名字为newArray[]而不是我们所定义的newArray,也就是说,当传递数组时,会在我们的数组名称后自动加上”[]”,所以后台接不到。

  7. ajax传递json参数到springmvc

    前后端交互,经常出现400或者415,这里写个小笔记,已做参考,不断完善方式一:前台代码:后台代码:

  8. $.ajax与SpringMVC的那点事-传参与返回

    由于有@RresponseBody标示,SpringMVC会将头信息中的Content-Type:application/x-www-form-urlencoded(默认值)改为application/json;,即返回为JSON格式,所以ajax的dataType:"json"可有可无。

  9. AJAX+JQuery+SpringMVC实现图片上传

    利用ajax实现前端与后台的交互,从服务端获取数据,并调回到前端进行解析。下面是前端代码:下面上后端的代码:Controller层Service层:DAO层:以上都是获取数据的部分,下面是提交数据的代码:Controller:Service:这个是文件上传的关键部分以上

  10. AJAX+SpringMVC 获取后台数据的方式

    利用ajax同步获取服务器的数据,当页面加载完成的时候后台代码:Service层:List转json方法:学习中。。。。。。

返回
顶部