AngularJS integrates Springmvc, Spring, and Mybatis to build a development environment _ AngularJS

This article mainly introduces how AngularJS integrates Springmvc, Spring, and Mybatis to build a development environment and make basic preparations for learning to use AngularJS, interested friends can refer to the use of AngularJS recently. After a round of searching on the internet, after a long time to solve the bug, angularJS is successfully used to integrate Springmvc, Spring, and Mybatis to build a development environment. (Here, Spring uses version 4.0.6, Mybatis version 3.2.5, and AngularJS version 1.0.3)

Step 1:Create a Maven project and add the required package under 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
     
   
 

Step 2:Add a configuration file under src/main/resources as follows:

(Note: If the src/main/resources and src/test/java directories are not displayed in the maven project you just created, right-click the project and click properties. In the Java Build Path, modify JRE System Library to version 1.7, as shown below)

The applicationContext. xml in the configuration file is as follows:

Spring-mvc.xml is as follows:

Configure web. xml as follows:

    
   
  
   
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
      
   
    
/
     
   
 

Step 3:Write various Java classes. The following is the user controller (to add and delete the t_user table in the db_news database)

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 ListgetUserList() {   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";  } }

Step 4:Introduce angular js files as follows:

Here Angular is used to add and delete users, mainly UserController. js, as follows:

'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(); };

For details about other Angular files, see the source code. Right-click the project, Run as, Maven install, and then release it to Tomcat to see the effect, as shown below:

AngularJS integrates Springmvc, Spring, and Mybatis to build a development environment. For more information, see PHP Chinese website (www.php1.cn )!