Angularjs integrates Springmvc, Spring and MyBatis to build the development environment _ANGULARJS

Recently want to learn the use of Angularjs, online search a lap after a long day to solve the bug, the successful use of Angularjs integration Springmvc, Spring, MyBatis built a development environment. (The version used here is 4.0.6,mybatis version is 3.2.5,ANGULARJS version is 1.0.3)

First step: Create a MAVEN project, add the required packages under Pom.xml

<project xmlns = "http://maven.apache.org/POM/4.0.0" xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
 xsi: schemaLocation = "http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion> 4.0.0 </ modelVersion>
 <groupId> test.AngularSpringmvcMybatis </ groupId>
 <artifactId> AngularSpringmvcMybatis </ artifactId>
 <packaging> war </ packaging>
 <version> 0.0.1-SNAPSHOT </ version>
 <name> AngularSpringmvcMybatis Maven Webapp </ name>
 <url> http://maven.apache.org </ url>
 <dependencies>
 <dependency>
  <groupId> junit </ groupId>
  <artifactId> junit </ artifactId>
  <version> 3.8.1 </ version>
  <scope> test </ scope>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-webmvc </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-core </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-tx </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-jdbc </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-orm </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-aspects </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.springframework </ groupId>
  <artifactId> spring-context-support </ artifactId>
  <version> 4.0.6.RELEASE </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.mybatis </ groupId>
  <artifactId> mybatis </ artifactId>
  <version> 3.2.5 </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.mybatis </ groupId>
  <artifactId> mybatis-spring </ artifactId>
  <version> 1.2.0 </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.aspectj </ groupId>
  <artifactId> aspectjweaver </ artifactId>
  <version> 1.6.8 </ version>
 </ dependency>
  
 <dependency>
  <groupId> mysql </ groupId>
  <artifactId> mysql-connector-java </ artifactId>
  <version> 5.1.6 </ version>
 </ dependency>
  
 <dependency>
  <groupId> c3p0 </ groupId>
  <artifactId> c3p0 </ artifactId>
  <version> 0.9.1 </ version>
 </ dependency>
  
 <dependency>
  <groupId> log4j </ groupId>
  <artifactId> log4j </ artifactId>
  <version> 1.2.16 </ version>
 </ dependency>
  
 <dependency>
  <groupId> javax.servlet </ groupId>
  <artifactId> servlet-api </ artifactId>
  <version> 3.0-alpha-1 </ version>
 </ dependency>
  
 <dependency>
  <groupId> asm </ groupId>
  <artifactId> asm </ artifactId>
  <version> 3.3 </ version>
 </ dependency>
 <dependency>
  <groupId> asm </ groupId>
  <artifactId> asm-commons </ artifactId>
  <version> 3.3 </ version>
 </ dependency>
 <dependency>
  <groupId> asm </ groupId>
  <artifactId> asm-tree </ artifactId>
  <version> 3.3 </ version>
 </ dependency>
  
 <dependency>
  <groupId> ognl </ groupId>
  <artifactId> ognl </ artifactId>
  <version> 3.0.6 </ version>
 </ dependency>
  
 <dependency>
  <groupId> commons-logging </ groupId>
  <artifactId> commons-logging </ artifactId>
  <version> 1.1.3 </ version>
 </ dependency>
  
 <dependency>
  <groupId> org.apache.velocity </ groupId>
  <artifactId> velocity </ artifactId>
  <version> 1.7 </ version>
 </ dependency>
 
 <dependency>
  <groupId> org.codehaus.jackson </ groupId>
  <artifactId> jackson-mapper-asl </ artifactId>
  <version> 1.9.12 </ version>
 </ dependency>
  
 </ dependencies>
 <build>
 <finalName> AngularSpringmvcMybatis </ finalName>
 </ build>
</ project>
Step 2: Add configuration files under src / main / resources as follows:



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



The applicationContext.xml in the configuration file is as follows:
<? xml version = "1.0" encoding = "UTF-8"?>
<beans xmlns = "http://www.springframework.org/schema/beans"
 xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
 xmlns: p = "http://www.springframework.org/schema/p"
 xmlns: aop = "http://www.springframework.org/schema/aop"
 xmlns: context = "http://www.springframework.org/schema/context"
 xmlns: jee = "http://www.springframework.org/schema/jee"
 xmlns: tx = "http://www.springframework.org/schema/tx"
 xsi: schemaLocation = "
  http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
  http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
  http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
  http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-4.0.xsd
  http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd ">
   
 <!-Automatic scanning->
 <context: component-scan base-package = "com.hin.dao" />
 <context: component -scan base-package = "com.hin.service" />
  
 <!-Configure data source->
 <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>
 
 <!-Configure sqlSessionFactory of mybatis->
 <bean id = "sqlSessionFactory" class = "org.mybatis.spring.SqlSessionFactoryBean">
  <property name = "dataSource" ref = "dataSource" />
  <!-Automatically scan the mappers.xml file, add classpath: com /...-->
  <property name = "mapperLocations" value = "classpath: com / hin / mappers / *. xml"> </ property>
  <!-mybatis configuration file->
  <property name = "configLocation" value = "classpath: mybatis-config.xml"> </ property>
 </ bean>
 
 <!-The package name where the DAO interface is located, Spring will automatically find the class under it->
 <bean class = "org.mybatis.spring.mapper.MapperScannerConfigurer">
  <property name = "basePackage" value = "com.hin.dao" />
  <property name = "sqlSessionFactoryBeanName" value = "sqlSessionFactory"> </ property>
 </ bean>
 
 <!-(Transaction management) transaction manager, use JtaTransactionManager for global tx->
 <bean id = "transactionManager"
  class = "org.springframework.jdbc.datasource.DataSourceTransactionManager">
  <property name = "dataSource" ref = "dataSource" />
 </ bean>
  
 <!-Configure transaction notification properties->
 <tx: advice id = "txAdvice" transaction-manager = "transactionManager">
  <!-Define transaction propagation properties->
  <tx: attributes>
   <tx: method name = "insert *" propagation = "REQUIRED" />
   <tx: method name = "update *" propagation = "REQUIRED" />
   <tx: method name = "edit *" propagation = "REQUIRED" />
   <tx: method name = "save *" propagation = "REQUIRED" />
   <tx: method name = "add *" propagation = "REQUIRED" />
   <tx: method name = "new *" propagation = "REQUIRED" />
   <tx: method name = "set *" propagation = "REQUIRED" />
   <tx: method name = "remove *" propagation = "REQUIRED" />
   <tx: method name = "delete *" propagation = "REQUIRED" />
   <tx: method name = "change *" propagation = "REQUIRED" />
   <tx: method name = "get *" propagation = "REQUIRED" read-only = "true" />
   <tx: method name = "find *" propagation = "REQUIRED" read-only = "true" />
   <tx: method name = "load *" propagation = "REQUIRED" read-only = "true" />
   <tx: method name = "*" propagation = "REQUIRED" read-only = "true" />
  </ tx: attributes>
 </ tx: advice>
 
 <!-Configure transaction aspect->
 <aop: config>
  <aop: pointcut id = "serviceOperation"
   expression = "execution (* com.hin.service. *. * (..))" />
  <aop: advisor advice-ref = "txAdvice" pointcut-ref = "serviceOperation" />
 </ aop: config>
 
</ beans>
spring-mvc.xml is as follows:
<? xml version = "1.0" encoding = "UTF-8"?>
<beans xmlns = "http://www.springframework.org/schema/beans"
 xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
 xmlns: p = "http://www.springframework.org/schema/p"
 xmlns: aop = "http://www.springframework.org/schema/aop"
 xmlns: mvc = "http://www.springframework.org/schema/mvc"
 xmlns: context = "http://www.springframework.org/schema/context"
 xmlns: jee = "http://www.springframework.org/schema/jee"
 xmlns: tx = "http://www.springframework.org/schema/tx"
 xsi: schemaLocation = "
  http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
  http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
  http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
  http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
  http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-4.0.xsd
  http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd ">
 
 <mvc: annotation-driven />
 
 <mvc: resources mapping = "/ resources / **" location = "/ resources /" />
 
 <bean id = "velocityConfig" class = "org.springframework.web.servlet.view.velocity.VelocityConfigurer">
  <property name = "resourceLoaderPath" value = "/ WEB-INF / html /" />
 </ bean>
 
 <!-Annotated packages, including subsets->
 <context: component-scan base-package = "com.hin.controller" />
 
 <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" />
 </ bean>
 
</ beans>
After finishing, configure web.xml as follows:
<! DOCTYPE web-app PUBLIC
 "-// Sun Microsystems, Inc.//DTD Web Application 2.3 // EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd">
 
<web-app>
 <display-name> Archetype Created Web Application </ display-name>
 
 <!-Spring configuration file->
 <context-param>
  <param-name> contextConfigLocation </ param-name>
  <param-value> classpath: applicationContext.xml </ param-value>
 </ context-param>
 <!-Encoding filter->
 <filter>
  <filter-name> encodingFilter </ filter-name>
  <filter-class> org.springframework.web.filter.CharacterEncodingFilter </ filter-class>
  <async-supported> true </ async-supported>
  <init-param>
   <param-name> encoding </ param-name>
   <param-value> UTF-8 </ param-value>
  </ init-param>
 </ filter>
 <filter-mapping>
  <filter-name> encodingFilter </ filter-name>
  <url-pattern> / * </ url-pattern>
 </ filter-mapping>
 <!-Spring listener->
 <listener>
  <listener-class> org.springframework.web.context.ContextLoaderListener </ listener-class>
 </ listener>
  
 <!-Add support for springmvc->
 <servlet>
  <servlet-name> springMVC </ servlet-name>
  <servlet-class> org.springframework.web.servlet.DispatcherServlet </ servlet-class>
  <init-param>
   <param-name> contextConfigLocation </ param-name>
   <param-value> classpath: spring-mvc.xml </ param-value>
  </ init-param>
  <load-on-startup> 1 </ load-on-startup>
  <!-
  <async-supported> true </ async-supported>
   ->
   
 </ servlet>
 <servlet-mapping>
  <servlet-name> springMVC </ servlet-name>
  <url-pattern> / </ url-pattern>
 </ servlet-mapping>
</ web-app>
The third step: write various Java classes, the following is the user controller (implementing the user addition and deletion of 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 List <User> 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";
 }
}
The fourth step: import angular js file as follows:



Angular is used here to implement the functions of adding users and deleting 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 ();
};
The other files about Angular can be seen in the source code. Finally, right-click the project, Run as, Maven install, and then publish to Tomcat to see the effect, as follows:



AngularJS integrates Springmvc, Spring, Mybatis to build a development environment, and hopes to help everyone learn.