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

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

Recently I want to learn how to use AngularJS. After I searched the internet and tried to solve the bug for a long time, I successfully used AngularJS 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.

<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 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:

<? 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: schemaLocat Ion = "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.springframewor K.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 scan --> <context: component-scan base-package = "com. hin. dao "/> <context: component-scan base-package =" com. hin. service "/> <! -- Configure the 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 scans mappers. add classpath: com/... to the xml file /... --> <property name = "mapperLocations" value = "classpath: com/hin/mappers /*. xml "> </property> <! -- Mybatis configuration file --> <property name = "configLocation" value = "classpath: mybatis-config.xml"> </property> </bean> <! -- DAO interface package name, Spring will automatically find the class under --> <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 Attributes --> <tx: advice id = "txAdvice" transaction-manager = "transactionManager"> <! -- Define transaction propagation attributes --> <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 = "r Emove * "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 = "htt P: // 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.springframewor K.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 = "velo CityConfig "class =" org. springframework. web. servlet. view. velocity. velocitycycler "> <property name =" resourceLoaderPath "value ="/WEB-INF/html/"/> </bean> <! -- Use annotation packages, including subset --> <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>

Configure web. xml as follows:

<! DOCTYPE web-app PUBLIC "-// Sun Microsystems, Inc. // DTD Web Application 2.3 // "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-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-class> org. springframework. web. context. ContextLoaderListener </listener-class> </listener> <! -- Added support for springmvc --> <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>

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 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";  } } 

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. I hope this will be helpful for your learning.

Articles you may be interested in:

• How to Build the Knockoutjs Environment
• Use Shell scripts to quickly build the Nodejs development environment in Ubuntu
• Build Nodejs development environment in Ubuntu
• Tutorial on setting up a Node. js development environment in Windows 8
• Learning Environment Construction for AngularJS getting started tutorial
• Use Sublime in Windows to build the nodejs Environment
• Simple steps to build a Node. js development environment in Linux