Code4java: Rest Service using Angularjs and Spring MVC with deployment in JBOSS 7 Server

Hello Friends .hope you all are fine.today i am going to demonstrate how one can call rest service using angularjs. i am going to use one of the directive called ng-resource for same. I am using bootstrap for look and feel.

for detailed document you can refer below link :
https://docs.angularjs.org/api/ngResource/service/$resource

Technology Stack being used:
1) JDK 1.7
2) JBOSS 7.1
3) Spring 3.x
4) Angularjs
5) BootStrap CDN

Note that I am calling Rest service without any database interaction (by putting dummy data in controller itself)

Project Structure is as given below :

The Model class is as given below :

package org.demo.model;

public class Book { 
 private String id;
 private String name;
 private String isbn;
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getName() {
  return name;
 }
 
 public String getIsbn() {
  return isbn;
 }
 public void setIsbn(String isbn) {
  this.isbn = isbn;
 }
 public void setName(String name) {
  this.name = name;
 }
}

Controller:

package org.demo.controller;
import java.util.ArrayList;
import java.util.List;
import org.demo.model.Book;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
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.util.UriComponentsBuilder;

@Controller
public class BookController {
 static List<Book> bookList = new ArrayList<>();
 static Book s1 = null;
 static Book s2 = null;
 static Book s3 = null;

 static {
  s1 = new Book();

  s1.setId("1");
  s1.setName("Don Quixote by Miguel de Cervantes");
  s1.setIsbn("12");

  s2 = new Book();

  s2.setId("2");
  s2.setName("In Search of Lost Time by Marcel Proust");
  s2.setIsbn("44");

  s3 = new Book();

  s3.setId("3");
  s3.setName("Ulysses by James Joyce");
  s3.setIsbn("33");

  bookList.add(s1);
  bookList.add(s2);
  bookList.add(s3);
 }

 @RequestMapping(value = "/book", method = RequestMethod.GET)
 public ResponseEntity<List<Book>> getAllBooks() {

  return new ResponseEntity<List<Book>>(bookList, HttpStatus.OK);
 }

 @RequestMapping(value = "/book", method = RequestMethod.POST)
 public ResponseEntity<Void> addBook(@RequestBody Book Student, UriComponentsBuilder builder) {

  HttpHeaders headers = new HttpHeaders();
  headers.setLocation(builder.path("/book/{id}").buildAndExpand(Student.getId()).toUri());
  return new ResponseEntity<Void>(headers, HttpStatus.CREATED);
 }

 @RequestMapping(value="/book/{id}", method = RequestMethod.PUT ) 
 public ResponseEntity<Book> updateBook(@RequestBody Book book) {
   
 return new   ResponseEntity<Book>(book, HttpStatus.OK);
  
 }

 @RequestMapping(value = "/book/{id}", method = RequestMethod.DELETE)
 public ResponseEntity<Void> deleteBook(@PathVariable("id") Integer id) {
  
  return new ResponseEntity<Void>(HttpStatus.NO_CONTENT);
 }
}

app.js - contains rest calls using Angularjs

(function() {
  angular.module("myApp", ['ui.bootstrap','ngResource']);

  angular.module("myApp").controller("CoversCtrl", function($scope, BookSvc, $modal) {
    $scope.books = BookSvc.query();
    
    $scope.openDialog = function() {
      var modalInstance = $modal.open({
        templateUrl: 'addbook.html',
        controller: ModalInstanceCtrl
      });

      modalInstance.result.then(function (newBook) {
        $scope.books.push(newBook);
      }, function () {
        console.log('Modal dismissed at: ' + new Date());
      });

    };
    
    $scope.editDialog = function(book){
      var modalInstance = $modal.open({
        templateUrl: 'editbook.html',
        controller: EditBookCtrl,
        resolve: {
        oldBook: function () {
          return book;
        }
       }
      });

      // modalInstance.result.then(function (newBook) {

      //   $scope.books.push(newBook);
      // }, function () {
      //   console.log('Modal dismissed at: ' + new Date());
      // });
    }
    
    $scope.removeBook = function(book) {
      BookSvc.remove(book, function(res) {
        $scope.books.splice($scope.books.indexOf(book), 1);
      });

    };
  });
  
  var ModalInstanceCtrl = function ($scope, $modalInstance, BookSvc) {

  $scope.addBook = function (formData) {

    BookSvc.save(formData, function(res){
      $modalInstance.close(res); 
    });
   
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

  var EditBookCtrl = function ($scope, $modalInstance, oldBook, BookSvc) {
  $scope.formData = oldBook;

  $scope.updateBook = function(){
  /*  var postingsResource = $resource('http://localhost:8080/SpringWithAngularjs/person/:id', { id: '3'});
       postingsResource.delete();*/
       
  BookSvc.update(JSON.stringify($scope.formData), function(res){
    $modalInstance.close(res); 
  });
   
  };


  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};
  
})();

Service for calling rest service is as given below :

(function(){
  
    angular.module("myApp").constant("baseUrl", "http://localhost:8080/SpringWithAngularjs/book/");
    
    angular.module("myApp").factory("BookSvc", function($resource, baseUrl){
      return $resource(baseUrl+":id", {}, { update: {method: "PUT", isArray: false}});
    });
})();

web.xml is as given 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" id="WebApp_ID" version="2.5">
  <display-name>SpringWithAngularjs</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>    
  </welcome-file-list>
  
   <servlet>
 <servlet-name>springrest</servlet-name>
 <servlet-class>
  org.springframework.web.servlet.DispatcherServlet
 </servlet-class>
 <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
 <servlet-name>springrest</servlet-name>
 <url-pattern>/</url-pattern>
</servlet-mapping>

</web-app>

Applicationcontext file named springrest-servlet.xml is as given below :

<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<mvc:resources mapping="/app-resources/**" location="/resources/"
 cache-period="31556926"/>
 
 
 <mvc:annotation-driven/>
 <context:annotation-config></context:annotation-config>
<context:component-scan base-package="org.demo.controller" />
 <bean
  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix">
   <value>/WEB-INF/</value>
  </property>
  <property name="suffix">
   <value>.jsp</value>
  </property>
 </bean>

<mvc:default-servlet-handler/>

</beans>

main page of application named index.jsp is as given below :

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CRUD with Angular JS</title>

  <link href="http://bootswatch.com/cosmo/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container" ng-controller="CoversCtrl">

    <div class="page-header">
      <h1>Book Cart </h1>
      <button class="btn btn-default" ng-click="openDialog()">Add New Book</button>
    </div>
    <div class="table-responsive">
      <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>ISBN NO</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="book in books">
          <td>{{ book.name }}</td>
          <td>{{ book.isbn }}</td>
          <td>
            <button type="button" class="btn btn-danger" ng-click="removeBook(book)">Delete</button>
            <button type="button" class="btn btn-info" ng-click="editDialog(book)">Edit</button>
          </td>
        </tr>
      </tbody>
    </table>    
    </div>

  </div>
<%-- <script src="${pageContext.request.contextPath}/app-resources/js/lib/angular.min.js"></script>
    <script src="${pageContext.request.contextPath}/app-resources/js/lib/angular-resource.min.js"></script> --%>
      <script src="https://code.angularjs.org/1.2.26/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.2.26/angular-resource.min.js"></script>
 <script src="${pageContext.request.contextPath}/app-resources/js/app.js"></script> 
 <script src="${pageContext.request.contextPath}/app-resources/js/BookSvc.js"></script>
 
 <script src="${pageContext.request.contextPath}/app-resources/js/ui-bootstrap-custom-tpls-0.10.0.min.js"></script>
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/app-resources/css/style.css"/>
  

</body>

</html>

Modal for add book is as given below :

addbook.html

<div class="modal-header">
  <h3 class="modal-title">Add Book</h3>
</div>
<div class="modal-body">
  <form role="form" novalidate name="addBookForm">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Enter Book Name" ng-model="formData.name">
    </div>
    <div class="form-group">
      <label for="isbn">ISBN No.</label>
      <input type="text" class="form-control" id="isbn" name="isbn" placeholder="ISBN" ng-model="formData.isbn">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" type="submit" form="addBookForm"  ng-click="addBook(formData)">Add Book</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Modal for editing book is as given below :

editbook.html

<div class="modal-header">
  <h3 class="modal-title">Edit Book</h3>
</div>
<div class="modal-body">
  <form role="form" novalidate name="editBookForm">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Enter Book Name" ng-model="formData.name">
    </div>
    <div class="form-group">
      <label for="isbn">ISBN No.</label>
      <input type="text" class="form-control" id="isbn" name="isbn" placeholder="ISBN" ng-model="formData.isbn">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" type="submit" form="editBookForm"  ng-click="updateBook(formData)">Update Book</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

once development is done ,you need to make war from the eclipse. if you are not familiar how to make war please go to http://www.codejava.net/ides/eclipse/eclipse-create-deployable-war-file-for-java-web-application
(Note : make sure that Compiler version of project is compitable. otherwise you will end up with having error like unsupported version Error.)

if you are not familiar with jboss Installation and deployments than please go to their official site to know about how to install & deploy application in the JBOSS Server.

Screenshot of application is as given below :