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如下：

<bean id="dataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/db_news"/>
<property name="username" value="root"/>
<property name="password" value="root"/>

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

<bean id="transactionManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

<tx:advice id="txAdvice" transaction-manager="transactionManager">

spring-mvc.xml如下：

<bean id="velocityConfig" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name="resourceLoaderPath" value="/WEB-INF/html/"/>

<bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
<property name="cache" value="true"/>
<property name="prefix" value=""/>
<property name="suffix" value=".html"/>
<property name="exposeSpringMacroHelpers" value="true"/>

完后配置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表的用户添加与用户删除）

@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，如下：

/**

• 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搭建开发环境就完成了，希望对大家的学习有所帮助。