AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

最近想学习AngularJS的使用，网上搜了一圈后，折腾了半天解决bug后，成功使用AngularJS整合Springmvc、Spring、Mybatis搭建了一个开发环境。（这里Spring使用的版本是4.0.6，Mybatis版本是3.2.5，AngularJS的版本是1.0.3）

第一步：创建一Maven项目，在pom.xml下添加需要的包

 
 4.0.0 
 test.AngularSpringmvcMybatis 
 AngularSpringmvcMybatis 
 war 
 0.0.1-SNAPSHOT 
 AngularSpringmvcMybatis Maven Webapp 
 http://maven.apache.org 
  
  
  junit 
  junit 
  3.8.1 
  test 
  
  
  
  org.springframework 
  spring-webmvc 
  4.0.6.RELEASE 
  
  
  
  org.springframework 
  spring-core 
  4.0.6.RELEASE 
  
  
  
  org.springframework 
  spring-tx 
  4.0.6.RELEASE 
  
  
  
  org.springframework 
  spring-jdbc 
  4.0.6.RELEASE 
  
  
  
  org.springframework 
  spring-orm 
  4.0.6.RELEASE 
  
  
  
  org.springframework 
  spring-aspects 
  4.0.6.RELEASE 
  
  
  
  org.springframework 
  spring-context-support 
  4.0.6.RELEASE 
  
  
  
  org.mybatis 
  mybatis 
  3.2.5 
  
  
  
  org.mybatis 
  mybatis-spring 
  1.2.0 
  
  
  
  org.aspectj 
  aspectjweaver 
  1.6.8 
  
  
  
  mysql 
  mysql-connector-java 
  5.1.6 
  
  
  
  c3p0 
  c3p0 
  0.9.1 
  
  
  
  log4j 
  log4j 
  1.2.16 
  
  
  
  javax.servlet 
  servlet-api 
  3.0-alpha-1 
  
  
  
  asm 
  asm 
  3.3 
  
  
  asm 
  asm-commons 
  3.3 
  
  
  asm 
  asm-tree 
  3.3 
  
  
  
  ognl 
  ognl 
  3.0.6 
  
  
  
  commons-logging 
  commons-logging 
  1.1.3 
  
  
  
  org.apache.velocity 
  velocity 
  1.7 
  
 
  
  org.codehaus.jackson 
  jackson-mapper-asl 
  1.9.12 
  
  
  
  
 AngularSpringmvcMybatis 
  
 

第二步：在src/main/resources下添加配置文件，如下：

（注：如果刚创建的maven项目中没显示src/main/resources与src/test/java目录，可以右键项目，再properties，在Java Build Path中，将JRE System Library修改为1.7版本，如下）

配置文件中applicationContext.xml如下：

spring-mvc.xml如下：

完后配置web.xml，如下：

 
 
 
 Archetype Created Web Application 
 
  
  
  contextConfigLocation 
  classpath:applicationContext.xml 
  
  
  
  encodingFilter 
  org.springframework.web.filter.CharacterEncodingFilter 
  true 
   
   encoding 
   UTF-8 
   
  
  
  encodingFilter 
  /* 
  
  
  
  org.springframework.web.context.ContextLoaderListener 
  
  
  
  
  springMVC 
  org.springframework.web.servlet.DispatcherServlet 
   
   contextConfigLocation 
   classpath:spring-mvc.xml 
   
  1 
   
   
  
  
  springMVC 
  / 
  
 

第三步：编写各个Java类，以下是用户控制器（实现db_news数据库中t_user表的用户添加与用户删除）

package com.hin.controller; 
import java.util.List; 
import javax.annotation.Resource; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.ResponseBody; 
import com.hin.entity.User; 
import com.hin.service.UserService; 
 
@Controller 
@RequestMapping("/users") 
public class UserController { 
 
 @Resource 
 private UserService userService; 
  
 @RequestMapping("/userlist.json") 
 public @ResponseBody List getUserList() { 
  return userService.getAllUsers(); 
 } 
 
 @RequestMapping(value = "/addUser/{userName}", method = RequestMethod.POST) 
 public @ResponseBody void addUser(@PathVariable("userName") String userName) { 
  userService.addUser(userName); 
 } 
 
 @RequestMapping(value = "/removeUser/{userName}", method = RequestMethod.DELETE) 
 public @ResponseBody void removeUser(@PathVariable("userName") String userName) { 
  userService.deleteUser(userName); 
 } 
 
 @RequestMapping(value = "/removeAllUsers", method = RequestMethod.DELETE) 
 public @ResponseBody void removeAllUsers() { 
  userService.deleteAll(); 
 } 
 
 @RequestMapping("/layout") 
 public String getUserPartialPage() { 
  return "users/layout"; 
 } 
} 

第四步：引入angular的js文件，如下：

这里使用Angular来实现添加用户与删除用户功能主要是UserController.js，如下：

'use strict'; 
 
/** 
 * UserController 
 */ 
var UserController = function($scope, $http) { 
 $scope.fetchUsersList = function() { 
  $http.get('users/userlist.json').success(function(userList){ 
   $scope.users = userList; 
  }); 
 }; 
 
 $scope.addNewUser = function(newUser) { 
  $http.post('users/addUser/' + newUser).success(function() { 
   $scope.fetchUsersList(); 
  }); 
  $scope.userName = ''; 
 }; 
 
 $scope.removeUser = function(user) { 
  $http.delete('users/removeUser/' + user).success(function() { 
   $scope.fetchUsersList(); 
  }); 
 }; 
 
 $scope.removeAllUsers = function() { 
  $http.delete('users/removeAllUsers').success(function() { 
   $scope.fetchUsersList(); 
  }); 
 
 }; 
 
 $scope.fetchUsersList(); 
}; 

关于Angular的其他文件具体可看源码，最后再右键项目，Run as，Maven install，再发布到Tomcat下就可以看到效果了，如下：

AngularJS整合Springmvc、Spring、Mybatis搭建开发环境就完成了，希望对大家的学习有所帮助。