Metadata Training Centre

There are Spring MVC + Angular reference online. I modify for easy to understand for developer. Why I write this post is to share complete example with details configuration. Before you start the development, take Dynamic Web Project with Tomcat 7.0 Server in Eclipse IDE.

Environment

MySQL Server
Tomcat 7.0
Eclipse JEE Platform

SQL-Script

CREATE TABLE OPERATOR (

ID VARCHAR(255) NOT NULL,

ADDRESS VARCHAR(255),

BANKACCOUNT VARCHAR(255),

NAME VARCHAR(255),

PHONE VARCHAR(255),

VERSION INTEGER,

PRIMARY KEY (ID)

);

CREATE TABLE ID_GEN (

GEN_NAME VARCHAR(50) NOT NULL,

GEN_VAL DECIMAL(38),

PRIMARY KEY (GEN_NAME)

);

INSERT INTO ID_GEN(GEN_NAME, GEN_VAL) values ('OPERATOR_GEN', 0);

Download Spring 4.0 & Jackson json.

Complete Libraries List for Project

- aopalliance.jar

- classmate-0.8.0.jar

- commons-beanutils.jar

- commons-collections-2.1.1.jar

- commons-el.jar

- commons-logging-1.1.1.jar

- eclipselink-2.5.0.jar

- hibernate-validator-5.0.1.Final.jar

- jackson-annotations-2.3.3.jar

- jackson-core-2.3.3.jar

- jackson-databind-2.3.3.jar

- javax.persistence_2.0.1.jar

- log4j-1.2.14.jar

- mysql-connector-java-5.1.6-bin.jar

- spring-aop-4.1.1.RELEASE.jar

- spring-aspects-4.1.1.RELEASE.jar

- spring-beans-4.1.1.RELEASE.jar

- spring-context-4.1.1.RELEASE.jar

- spring-context-support-4.1.1.RELEASE.jar

- spring-core-4.1.1.RELEASE.jar

- spring-expression-4.1.1.RELEASE.jar

- spring-instrument-4.1.1.RELEASE.jar

- spring-instrument-tomcat-4.1.1.RELEASE.jar

- spring-jdbc-4.1.1.RELEASE.jar

- spring-orm-4.1.1.RELEASE.jar

- spring-oxm-4.1.1.RELEASE.jar

- spring-tx-4.1.1.RELEASE.jar

- spring-web-4.1.1.RELEASE.jar

- spring-webmvc-4.1.1.RELEASE.jar

- spring-webmvc-portlet-4.1.1.RELEASE.jar

- spring-websocket-4.1.1.RELEASE.jar

- validation-api-1.1.0.Final.jar

- weld-servlet-2.2.0.Final.jar

1. Create a Dynamic Web Project in eclipse and add the above jar files to WEN-INF\lib folder.

2. Configure web.xml file as below.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

version="2.5">

<servlet-name>app-servlet</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/servlet-context.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>app-servlet</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>

</web-app>

3.Create xml file name with servlet-contect.xml and configure as below. Put the xml file into WEB-FIN folder.

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:aop="http://www.springframework.org/schema/aop"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:faces="http://www.springframework.org/schema/faces"

xmlns:int-security="http://www.springframework.org/schema/integration/security"

xmlns:sec="http://www.springframework.org/schema/security"

xmlns:tx="http://www.springframework.org/schema/tx"

xmlns:util="http://www.springframework.org/schema/util"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xmlns:p="http://www.springframework.org/schema/p"

xsi:schemaLocation="http://www.springframework.org/schema/integration/security http://www.springframework.org/schema/integration/security/spring-integration-security-4.0.xsd

http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd

http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-4.0.xsd

http://www.springframework.org/schema/integration http://www.springframework.org/schema/integration/spring-integration.xsd

http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd

http://www.springframework.org/schema/faces http://www.springframework.org/schema/faces/spring-faces-4.0.xsd

http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd

http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd

http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd

http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

<context:component-scan base-package="com.angular"/>

<mvc:annotation-driven />

<mvc:default-servlet-handler/>

</bean>

<tx:annotation-driven transaction-manager="transactionManager" />

</bean>

</property>

<props>

<prop key="eclipselink.weaving">false</prop>

</props>

</property>

</bean>

</property>

</bean>

</bean>

</beans>

3. Create persistence.xml file for JPA configuration under src/META-FIN/ folder.

<?xml version="1.0" encoding="UTF-8"?>

<persistence-unit name="JPA" transaction-type="RESOURCE_LOCAL">

<provider>org.eclipse.persistence.jpa.PersistenceProvider</provider>

<class>com.angular.core.operator.Operator</class>

<shared-cache-mode>NONE</shared-cache-mode>

</properties>

</persistence-unit>

</persistence>

Configuration setting is mostly finished. Let’s start to write Entity, DAO, Services, Controllers, web pages and js.

5. Operator.java- Entity

package com.angular.core.operator;

import java.io.Serializable;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.NamedQueries;

import javax.persistence.NamedQuery;

import javax.persistence.TableGenerator;

import javax.persistence.Version;

@Entity

@TableGenerator(name = "OPERATOR_GEN", table = "ID_GEN", pkColumnName = "GEN_NAME", valueColumnName = "GEN_VAL", pkColumnValue = "OPERATOR_GEN", allocationSize = 10)

@NamedQueries(value = { @NamedQuery(name = "Operator.findAll", query = "SELECT o FROM Operator o "),

@NamedQuery(name = "Operator.findById", query = "SELECT o FROM Operator o WHERE o.id = :id") })

public class Operator implements Serializable {

@Id

@GeneratedValue(strategy = GenerationType.TABLE, generator = "OPERATOR_GEN")

private String id;

private String name;

private String address;

private String phone;

private String bankAccount;

@Version

private int version;

public Operator() {

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return this.name;

}

public void setName(String name) {

this.name = name;

}

public String getAddress() {

return this.address;

}

public void setAddress(String address) {

this.address = address;

}

public String getPhone() {

return this.phone;

}

public void setPhone(String phone) {

this.phone = phone;

}

public String getBankAccount() {

return bankAccount;

}

public void setBankAccount(String bankAccount) {

this.bankAccount = bankAccount;

}

public int getVersion() {

return version;

}

public void setVersion(int version) {

this.version = version;

}

6. IOperatorDAO.java – DOA Interface

package com.angular.core.operator.persistence.interfaces;

import java.util.List;

import com.angular.core.common.DAOException;

import com.angular.core.operator.Operator;

public interface IOperatorDAO {

public Operator insert(Operator operator) throws DAOException;

public Operator update(Operator Operator) throws DAOException;

public void delete(String id) throws DAOException;

public Operator findById(String id) throws DAOException;

public List<Operator> findAll() throws DAOException;

}

7. OperatorDAO.java – DAO Implementation

package com.angular.core.operator.persistence;

import java.util.List;

import javax.persistence.EntityManager;

import javax.persistence.PersistenceContext;

import javax.persistence.PersistenceException;

import javax.persistence.Query;

import org.apache.log4j.Logger;

import org.springframework.stereotype.Repository;

import org.springframework.transaction.annotation.Propagation;

import org.springframework.transaction.annotation.Transactional;

import com.angular.core.common.DAOException;

import com.angular.core.operator.Operator;

import com.angular.core.operator.persistence.interfaces.IOperatorDAO;

@Repository("OperatorDAO")

public class OperatorDAO implements IOperatorDAO {

private Logger logger = Logger.getLogger(this.getClass());

@PersistenceContext

protected EntityManager em;

@Transactional(propagation = Propagation.REQUIRED)

public Operator insert(Operator operator) throws DAOException {

try {

logger.debug("insert() method has been started.");

em.persist(operator);

em.flush();

logger.debug("insert() method has been successfully finisehd.");

} catch (PersistenceException pe) {

logger.error("insert() method has been failed.", pe);

throw new DAOException("Failed to insert Operator", pe);

}

return operator;

}

@Transactional(propagation = Propagation.REQUIRED)

public Operator update(Operator operator) throws DAOException {

try {

logger.debug("update() method has been started.");

em.merge(operator);

em.flush();

logger.debug("update() method has been successfully finisehd.");

} catch (PersistenceException pe) {

logger.error("update() method has been failed.", pe);

throw new DAOException("Failed to update Operator", pe);

}

return operator;

}

@Transactional(propagation = Propagation.REQUIRED)

public void delete(String operatorId) throws DAOException {

try {

logger.debug("delete() method has been started.");

Operator operator = em.find(Operator.class, operatorId);

em.remove(operator);

em.flush();

logger.debug("delete() method has been successfully finisehd.");

} catch (PersistenceException pe) {

logger.error("delete() method has been failed.", pe);

throw new DAOException("Failed to update Operator", pe);

}

@Transactional(propagation = Propagation.REQUIRED)

public Operator findById(String id) throws DAOException {

Operator result = null;

try {

logger.debug("findById() method has been started.");

System.out.println("Find ID" + id);

result = em.find(Operator.class, id);

em.flush();

logger.debug("findById() method has been successfully finished.");

} catch (PersistenceException pe) {

logger.error("findById() method has been failed.", pe);

throw new DAOException("Failed to find Operator", pe);

}

return result;

}

@Transactional(propagation = Propagation.REQUIRED)

public List<Operator> findAll() throws DAOException {

List<Operator> result = null;

try {

logger.debug("findAll() method has been started.");

Query q = em.createNamedQuery("Operator.findAll");

result = q.getResultList();

em.flush();

logger.debug("findAll() method has been started.");

} catch (PersistenceException pe) {

throw new DAOException("Failed to find all of Operator", pe);

}

return result;

}

7. IOperatorService.java – Service Interface

package com.angular.core.operator.service.interfaces;

import java.util.List;

import com.angular.core.common.SystemException;

import com.angular.core.operator.Operator;

public interface IOperatorService {

public Operator addNewOperator(Operator Operator) throws SystemException;

public Operator updateOperator(Operator Operator) throws SystemException;

public void deleteOperator(String id) throws SystemException;

public Operator findOperatorById(String id) throws SystemException;

public List<Operator> findAllOperator() throws SystemException;

}

8. OperatorService.java – Service Implementation

package com.angular.core.operator.service;

import java.util.List;

import javax.annotation.Resource;

import org.apache.log4j.Logger;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Propagation;

import org.springframework.transaction.annotation.Transactional;

import com.angular.core.common.DAOException;

import com.angular.core.common.SystemException;

import com.angular.core.operator.Operator;

import com.angular.core.operator.persistence.interfaces.IOperatorDAO;

import com.angular.core.operator.service.interfaces.IOperatorService;

@Service(value = "OperatorService")

public class OperatorService implements IOperatorService {

private Logger logger = Logger.getLogger(this.getClass());

@Resource(name = "OperatorDAO")

private IOperatorDAO operatorDAO;

@Transactional(propagation = Propagation.REQUIRED)

public Operator addNewOperator(Operator Operator) throws SystemException {

Operator result = null;

try {

logger.debug("addNewOperator() method has been started.");

operatorDAO.insert(Operator);

logger.debug("addNewOperator() method has been successfully finisehd.");

} catch (DAOException e) {

logger.error("addNewOperator() method has been failed.");

throw new SystemException("Faield to add a new Operator", e);

}

return result;

}

@Transactional(propagation = Propagation.REQUIRED)

public Operator updateOperator(Operator Operator) throws SystemException {

Operator result = null;

try {

logger.debug("updateOperator() method has been started.");

operatorDAO.update(Operator);

logger.debug("updateOperator() method has been successfully finisehd.");

} catch (DAOException e) {

logger.error("updateOperator() method has been failed.");

throw new SystemException("Faield to update a Operator", e);

}

return result;

}

@Transactional(propagation = Propagation.REQUIRED)

public void deleteOperator(String operatorId) throws SystemException {

try {

logger.debug("deleteOperator() method has been started.");

operatorDAO.delete(operatorId);

logger.debug("deleteOperator() method has been successfully finisehd.");

} catch (DAOException e) {

logger.error("deleteOperator() method has been failed.");

throw new SystemException("Faield to delete a Operator", e);

}

@Transactional(propagation = Propagation.REQUIRED)

public List<Operator> findAllOperator() throws SystemException {

List<Operator> result = null;

try {

logger.debug("findAllOperator() method has been started.");

result = operatorDAO.findAll();

logger.debug("findAllOperator() method has been successfully finisehd.");

} catch (DAOException e) {

logger.error("findAllOperator() method has been failed.");

throw new SystemException("Faield to find all of Operator)", e);

}

return result;

}

@Transactional(propagation = Propagation.REQUIRED)

public Operator findOperatorById(String id) throws SystemException {

Operator result = null;

try {

logger.debug("findOperatorById() method has been started.");

result = operatorDAO.findById(id);

logger.debug("findOperatorById() method has been started.");

} catch (DAOException e) {

logger.error("findOperatorById() method has been failed.");

throw new SystemException("Faield to find a Operator (ID : " + id + ")", e);

}

return result;

}

9. URIConstant.java – Web Service URL Constant

package com.angular.webservice;

public class URIConstant {

/* Operator */

public static final String OPERATOR_FIND_ALL = "/operator/findall";

public static final String OPERATOR_FIND = "/operator/{id}";

public static final String OPERATOR_CREATE = "/operator/create";

public static final String OPERATOR_UPDATE = "/operator/update";

public static final String OPERATOR_DELETE = "/operator/delete";

}

10. OperatorController.java – Controller

package com.angular.webservice;

import java.util.List;

import org.apache.log4j.Logger;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import com.angular.core.operator.Operator;

import com.angular.core.operator.service.interfaces.IOperatorService;

@Controller

public class OperatorController {

@Autowired

private IOperatorService operatorService;

private static final Logger logger = Logger.getLogger(OperatorController.class);

@RequestMapping(value = URIConstant.OPERATOR_CREATE, method = RequestMethod.POST, produces = "application/json; charset=utf-8")

public @ResponseBody

Operator createOperator(@RequestBody Operator operator) {

logger.info("createOperator() proces has been started...");

operatorService.addNewOperator(operator);

logger.info("createOperator() proces has been finished...");

return operator;

}

@RequestMapping(value = URIConstant.OPERATOR_UPDATE, method = RequestMethod.POST)

public @ResponseBody

Operator updateOperator(@RequestBody Operator operator) {

logger.info("updateOperator() proces has been started...");

operatorService.updateOperator(operator);

logger.info("updateOperator() proces has been finished...");

return operator;

}

@RequestMapping(value = URIConstant.OPERATOR_DELETE, method = RequestMethod.POST)

public @ResponseBody

void deleteOperator(@RequestBody String operatorId) {

logger.info("deleteOperator() proces has been started...");

operatorService.deleteOperator(operatorId);

logger.info("deleteOperator() proces has been finished...");

}

@RequestMapping(value = URIConstant.OPERATOR_FIND_ALL, method = RequestMethod.GET)

public @ResponseBody

List<Operator> findAllOperator() {

logger.info("findAllOperator() proces has been started...");

List<Operator> operatorList = operatorService.findAllOperator();

logger.info("findAllOperator() proces has been finished...");

return operatorList;

}

@RequestMapping(value = URIConstant.OPERATOR_FIND, method = RequestMethod.GET)

public @ResponseBody

Operator findOperator(@PathVariable("id") String operatorId) {

logger.info("findAllOperator() proces has been started...");

Operator operator = operatorService.findOperatorById(operatorId);

logger.info("findAllOperator() proces has been finished...");

return operator;

}

11. index.jsp

<!doctype html>

<head>

<title>My AngularJS App</title>

</head>

<body>

<li>

<a href="#/operator-list">Manage Operator</a>

</li>

</ul>

</body>

</html>

12. operator-list.jsp

<thead>

<tr>

<th style="min-width: 200px;">Address</th>

<th style="min-width: 200px;">Phone</th>

<th style="min-width: 200px;">Bank Account</th>

</tr>

</thead>

<tbody>

<td>{{ operator.name }}</td>

<td>{{ operator.address }}</td>

<td>{{ operator.phone }}</td>

<td>{{ operator.bankAccount }}</td>

<td><a ng-click="deleteOperator(operator.id)" class="btn btn-small btn-danger">delete</a></td>

</tr>

</tbody>

</table>

<a ng-click="createNewOperator()" class="btn btn-small">Create New Operator</a>

</div>

13. operator-creation.jsp

<h1>Create a new operator</h1>

</div>

<label class="control-label" for="inputAddress">Address:</label>

</div>

<label class="control-label" for="inputPhone">Phone:</label>

</div>

<label class="control-label" for="inputBankAccount">Bank Account:</label>

</div>

<a ng-click="createNewOperator()" class="btn btn-small btn-primary">Create</a>

</div>

</form>

</div>

14. operator-detail.jsp

<h1>Operator detail</h1>

<label class="control-label" for="inputFirstName">First name:</label>

</div>

<label class="control-label" for="inputLastName">Address:</label>

</div>

<label class="control-label" for="inputPhone">Phone:</label>

</div>

<label class="control-label" for="inputBankAccount">Bank Account:</label>

</div>

<a ng-click="cancel()" class="btn btn-small">Cancel</a>

<a ng-click="updateOperator()" class="btn btn-small btn-primary">Update</a>

</div>

</form>

</div>

15. Download Angular JS lib. Put the js files into js/lib/angular folder under web application directory.

- angular-cookies.js

- angular-cookies.min.js

- angular-loader.js

- angular-loader.min.js

- angular-resource.js

- angular-resource.min.js

- angular-sanitize.js

- angular-sanitize.min.js

- angular.js

- angular.min.js

- Scope.SafeApply.js

6. Download JQuery JS lib. Put the js files into js/jquery folder under web application directory.

- jquery-2.0.3.js

- jquery-2.0.3.min.js

17. Download Bootstrap JS lib. Put the js files into js/bootstrap folder under web application directory.

- bootstrap.js

- bootstrap.min.js

Let’s go to continue to create Angular js files as below and put the js files into js folder under web application directory.

18. app.js

'use strict';

// Declare app level module which depends on filters, and services

angular.module('newdev', ['newdev.filters', 'newdev.services', 'newdev.directives', 'newdev.controllers']).

config(['$routeProvider', function ($routeProvider) {

$routeProvider.when('/operator-list', {templateUrl: 'operator/operator-list.jsp', controller: 'OperatorListCtrl'});

$routeProvider.when('/operator-detail/:id', {templateUrl: 'operator/operator-detail.jsp', controller: 'OperatorDetailCtrl'});

$routeProvider.when('/operator-creation', {templateUrl: 'operator/operator-creation.jsp', controller: 'OperatorCreationCtrl'});

}]);

19. controllers.js

'use strict';

/* Controllers */

var app = angular.module('newdev.controllers', []);

//http://www.angularcode.com/demo-of-a-simple-crud-restful-php-service-used-with-angularjs-and-mysql/

// Clear browser cache (in development mode)

// http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine

app.run(function ($rootScope, $templateCache) {

$rootScope.$on('$viewContentLoaded', function () {

$templateCache.removeAll();

});

app.controller('OperatorListCtrl', ['$scope', 'OperatorFindAll', 'OperatorDelete', '$location',

function ($scope, OperatorFindAll, OperatorDelete, $location) {

// callback for ng-click 'editOperator':

$scope.editOperator = function (operatorId) {

$location.path('/operator-detail/' + operatorId);

};

// callback for ng-click 'deleteOperator':

$scope.deleteOperator = function (operatorId) {

OperatorDelete.delete(operatorId);

$location.path('/operator-list');

};

// callback for ng-click 'createOperator':

$scope.createNewOperator = function () {

$location.path('/operator-creation');

};

$scope.operators = OperatorFindAll.findall();

}]);

app.controller('OperatorDetailCtrl', ['$scope', '$routeParams', 'OperatorUpdate', 'OperatorFind', '$location',

function ($scope, $routeParams, OperatorUpdate, OperatorFind, $location) {

// callback for ng-click 'updateOperator':

$scope.updateOperator = function () {

OperatorUpdate.update($scope.operator);

$location.path('/operator-list');

};

// callback for ng-click 'cancel':

$scope.cancel = function () {

$location.path('/operator-list');

};

$scope.operator = OperatorFind.find({id: $routeParams.id});

}]);

app.controller('OperatorCreationCtrl', ['$scope', 'OperatorCreate', '$location',

function ($scope, OperatorCreate, $location) {

// callback for ng-click 'createNewOperator':

$scope.createNewOperator = function () {

OperatorCreate.create($scope.operator);

$location.path('/operator-list');

}

}]);

20. directives.js

'use strict';

/* Directives */

angular.module('newdev.directives', []).

directive('appVersion', ['version', function(version) {

return function(scope, elm, attrs) {

elm.text(version);

};

}]);

21. services.js

'use strict';

var services = angular.module('newdev.services', ['ngResource']);

var contextRoot = '/newdev';

services.factory('OperatorFindAll', function ($resource) {

return $resource(contextRoot + '/operator/findall', {}, {

findall: { method: 'GET', isArray: true }

})

});

services.factory('OperatorFind', function ($resource) {

return $resource(contextRoot + '/operator/:id', {}, {

find: { method: 'GET', params: {id: '@id'} },

})

});

services.factory('OperatorCreate', function ($resource) {

return $resource(contextRoot + '/operator/create', {}, {

create: { method: 'POST' }

})

});

services.factory('OperatorUpdate', function ($resource) {

return $resource(contextRoot + '/operator/update', {}, {

update: { method: 'POST' }

})

});

services.factory('OperatorDelete', function ($resource) {

return $resource(contextRoot + '/operator/delete', {}, {

delete: { method: 'POST'}

})

});

22.Download BootStrap CSS Lib. Put the css files into css/bootstrap folder under web application directory.

- bootstrap-responsive.css

- bootstrap-responsive.min.css

- bootstrap.css

- bootstrap.min.css

23. Complete Package Structure

Result

Metadata Training Centre

10 November 2014

CRUD example using Angular + Spring MVC 4.0 REST Web Service + JPA 2.0

Like us on Facebook