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

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

1.  MySQL Server
2.  Tomcat 7.0
3.  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>         <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 id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">         <property name="prefix"><value>/</value></property>         <property name="suffix"><value>.jsp</value></property>     </bean>           <tx:annotation-driven transaction-manager="transactionManager" />      <bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager">            <property name="entityManagerFactory" ref="entityManagerFactory"/>      </bean>           <bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">            <property name="persistenceUnitName" value="JPA"/>            <property name="jpaVendorAdapter" ref="jpaVendorAdapter"/>            <property name="jpaDialect">                 <bean class="org.springframework.orm.jpa.vendor.EclipseLinkJpaDialect"/>            </property>            <property name="jpaPropertyMap">                 <props>                      <prop key="eclipselink.weaving">false</prop>                 </props>            </property>                       <property name="loadTimeWeaver">                 <bean class="org.springframework.instrument.classloading.InstrumentationLoadTimeWeaver">                 </bean>            </property>      </bean>           <bean id="jpaVendorAdapter" class="org.springframework.orm.jpa.vendor.EclipseLinkJpaVendorAdapter">            <property name="databasePlatform" value="org.eclipse.persistence.platform.database.MySQLPlatform"/>            <property name="generateDdl" value="false"/>            <property name="showSql" value="true"/>      </bean>    </beans>

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

<?xml version="1.0" encoding="UTF-8"?> <persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">   <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>       <property name="javax.persistence.jdbc.url" value="jdbc:mysql://localhost:3306/spangular"/>       <property name="javax.persistence.jdbc.user" value="spangular"/>        <property name="javax.persistence.jdbc.password" value="spangular"/>       <property name="javax.persistence.jdbc.driver" value="com.mysql.jdbc.Driver"/>            <property name="eclipselink.orm.throw.exceptions" value="true"/>     </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> <html lang="en" ng-app="newdev">      <head>            <meta charset="utf-8">            <meta name="viewport" content="width=device-width, initial-scale=1.0">            <title>My AngularJS App</title>            <link rel="stylesheet" href="css/app.css" />            <link rel="stylesheet" href="css/bootstrap/bootstrap-responsive.min.css" />            <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />      </head>      <body>            <base href="/newdev/" />            <ul class="menu">                 <li>                      <a href="#/operator-list">Manage Operator</a>                 </li>            </ul>                 <div ng-view></div>            <script src="js/jquery/jquery-2.0.3.js"></script>            <script src="js/bootstrap/bootstrap.js"></script>                 <script src="lib/angular/angular.js"></script>            <script src="lib/angular/angular-resource.js"></script>            <script src="lib/angular/Scope.SafeApply.js"></script>                 <script src="js/app.js"></script>            <script src="js/services.js"></script>            <script src="js/controllers.js"></script>            <script src="js/filters.js"></script>            <script src="js/directives.js"></script>      </body> </html>

12. operator-list.jsp

<div class="span6">     <table class="table table-striped table-condensed">         <thead>         <tr>             <th style="min-width: 200px;">Full Name</th>             <th style="min-width: 200px;">Address</th>             <th style="min-width: 200px;">Phone</th>             <th style="min-width: 200px;">Bank Account</th>             <th style="width:20px;">&nbsp;</th>             <th style="width:20px;">&nbsp;</th>         </tr>         </thead>         <tbody>         <tr ng-repeat="operator in operators">             <td>{{ operator.name }}</td>             <td>{{ operator.address }}</td>             <td>{{ operator.phone }}</td>             <td>{{ operator.bankAccount }}</td>             <td><a ng-click="editOperator(operator.id)" class="btn btn-small btn-primary">edit</a></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

<div class="container">     <h1>Create a new operator</h1>     <form novalidate="novalidate" class="form-horizontal">         <div class="control-group">             <label class="control-label" for="inputName">Full Name:</label>             <div class="controls">                 <input type="text" id="inputName" ng-model="operator.name" placeholder="Full Name"/>             </div>         </div>         <div class="control-group">             <label class="control-label" for="inputAddress">Address:</label>             <div class="controls">                 <input type="text" id="inputAddress" ng-model="operator.address" placeholder="Address"/>             </div>         </div>         <div class="control-group">             <label class="control-label" for="inputPhone">Phone:</label>             <div class="controls">                 <input type="text" id="inputPhone" ng-model="operator.phone" placeholder="Phone"/>             </div>         </div>         <div class="control-group">             <label class="control-label" for="inputBankAccount">Bank Account:</label>             <div class="controls">                 <input type="text" id="inputBankAccount" ng-model="operator.bankAccount" placeholder="Bank Account"/>             </div>         </div>         <div class="control-group">             <div class="controls">                 <a ng-click="createNewOperator()" class="btn btn-small btn-primary">Create</a>             </div>         </div>     </form> </div>

14. operator-detail.jsp

<div class="container">     <h1>Operator detail</h1>     <form novalidate="novalidate" class="form-horizontal">         <div class="control-group">             <label class="control-label" for="inputFirstName">First name:</label>             <div class="controls">                 <input type="text" id="inputFirstName" ng-model="operator.name"/>             </div>         </div>         <div class="control-group">             <label class="control-label" for="inputLastName">Address:</label>             <div class="controls">                 <input type="text" id="inputLastName" ng-model="operator.address"/>             </div>         </div>         <div class="control-group">             <label class="control-label" for="inputPhone">Phone:</label>             <div class="controls">                 <input type="text" id="inputPhone" ng-model="operator.phone"/>             </div>         </div>         <div class="control-group">             <label class="control-label" for="inputBankAccount">Bank Account:</label>             <div class="controls">                 <input type="text" id="inputBankAccount" ng-model="operator.bankAccount"/>             </div>         </div>         <div class="control-group">             <div class="controls">                 <a ng-click="cancel()" class="btn btn-small">Cancel</a>                 <a ng-click="updateOperator()" class="btn btn-small btn-primary">Update</a>             </div>         </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