• Spring MVC CRUD Operations using Angularjs

    Posted on March 20, 2017 by Hamidul Islam in Angular JS.

    spring-mvc-agular


    Angularjs can be easily used with Spring MVC. In this article we will explain how Spring MVC and Angularjs can be used together. All the CRUD operations of spring controller will be exposed as rest web service. From Angularjs controller we can easily invoke rest services to create, read, update and delete the data.


    Preparing Spring Rest Controller:

    All the operations for database are written in rest controller. 

    package com.proliferay.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    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.proliferay.model.Book;
    import com.proliferay.service.BookService;
    
    /**
     * 
     * @author Hamidul Islam
     *
     */
    
    @Controller
    public class RestController {  
    	@Autowired
    	private BookService bookService;      
    	@RequestMapping(value = "/rest/getAllBook", method = RequestMethod.GET)
    	public @ResponseBody List getAllBook() {
    		System.out.println("#########getAllBook()#########");
    		List<Book> bookList = bookService.findAllBooks();
    		return bookList;
    	}
    	
    	@RequestMapping(value = "/rest/addBook", method = RequestMethod.POST)
    	public @ResponseBody String addBook(@RequestBody Book book) { 
    		System.out.println("#########addBook()#########");
    		bookService.addBook(book);
    		return "OK";
    	}
    	
    	@RequestMapping(value = "/rest/updateBook", method = RequestMethod.POST)
    	public @ResponseBody String  updateBook(@RequestBody Book book) {
    		System.out.println("#########updateBook()#########");
    		bookService.updateBook(book); 
    		return "OK";
    	}
    	
    	@RequestMapping(value = "/rest/deleteBook", method = RequestMethod.POST)
    	public @ResponseBody String  deleteBook(@RequestBody Book book) {
    		System.out.println("#########deleteBook()#########");
    		bookService.deleteBook(book.getId());
    		return "OK";
    	}
    }
    
    

    @ResponseBody:

    Give attention to @ResponseBody annotation. If a method is annotated with @ResponseBody the controller will automatically converts the returned contents and writes to the http response. In the getAllBook method the returned list will be automatically converted to JSON and will be written to http response.

    Preparing Angularjs Controller:

    function bookController($scope, BookService) {
    	var self = this;
    	$scope.book = {};
    	self.books = [];
    	$scope.action = 'add';
    	$scope.message = '';
    
    	
    
    	getAllBooks();
    
    	function getAllBooks() {
    		console.log("####bookController:getAllBooks()#########");
    		BookService.getAllBook().then(function(d) {
    			self.books = d;
    		}, function(errResponse) {
    			console.error(errResponse);
    		});
    
    	}
    
    	$scope.add = function() {
    		console.log("####bookController:add()#########");
    		var json = angular.toJson($scope.book)
    		BookService.addBook($scope.book).then(function(d) {
    			$scope.message = 'Book Added Successfully';
    			getAllBooks();
    			$scope.clear();
    		}, function(errResponse) {
    			console.error(errResponse);
    		});
    	}
    
    	$scope.update = function() {
    		console.log("####bookController:update()#########");
    		BookService.updateBook($scope.book).then(function(d) {
    			$scope.message = 'Book Updated Successfully';
    			getAllBooks();
    		}, function(errResponse) {
    			console.error(errResponse);
    		});
    	}
    	
    	$scope.clear = function() {
    		console.log("####bookController:clear()#########");
    		$scope.book = {};
    		$scope.action = 'add';
    		
    	}
    	
    	$scope.edit = function(book) {
    		console.log("####bookController:edit()#########");
    		$scope.book = book;
    		$scope.action = 'update';
    	}
    
    	$scope.deleteBook = function(book){
    		console.log("####bookController:deleteBook()#########");
    		BookService.deleteBook(book).then(function(d) {
    			$scope.message = 'Book Delted Successfully';
    			getAllBooks();
    		}, function(errResponse) {
    			console.error(errResponse);
    		});
    	}
    }
    
    var app = angular.module('bookApp', [ 'MyOwnService' ]);
    app.controller('bookController', bookController);
    

    Writing the front end service:

    All the front end  operations are kept inside a factory. The factory method can be easily called from front end controller.

    var validationHandler = angular.module('MyOwnService', []);
    validationHandler.factory('BookService', function($http, $q) {
    	var REST_SERVICE_URI = 'http://localhost:8080/angular/';
    	var factory = {
    		getAllBook : getAllBook,
    		addBook : addBook,
    		updateBook : updateBook,
    		deleteBook : deleteBook
    	};
    	return factory;
    
    	function getAllBook() {
    		console.log("####service:getAllBook()#########");
    		var deferred = $q.defer();
    
    		$http.get(REST_SERVICE_URI + 'rest/getAllBook').then(
    				function(response) {
    
    					deferred.resolve(response.data);
    				}, function(errResponse) {
    					console.error(errResponse);
    					deferred.reject(errResponse);
    				});
    
    		return deferred.promise;
    	}
    
    	function addBook(book) {
    		console.log("####service:addBook()#########");
    		var deferred = $q.defer();
    
    		$http.post(REST_SERVICE_URI + 'rest/addBook', book).then(
    				function(response) {
    					deferred.resolve(response.data);
    				}, function(errResponse) {
    					console.error(errResponse);
    					deferred.reject(errResponse);
    				});
    
    		return deferred.promise;
    	}
    
    	function updateBook(book) {
    		console.log("####service:updateBook()#########");
    		var deferred = $q.defer();
    
    		$http.post(REST_SERVICE_URI + 'rest/updateBook', book).then(
    				function(response) {
    
    					deferred.resolve(response.data);
    				}, function(errResponse) {
    					console.error(errResponse);
    					deferred.reject(errResponse);
    				});
    
    		return deferred.promise;
    	}
    
    	function deleteBook(book) {
    		console.log("####service:deleteBook()#########");
    		var deferred = $q.defer();
    		$http.post(REST_SERVICE_URI + 'rest/deleteBook', book).then(
    				function(response) {
    
    					deferred.resolve(response.data);
    				}, function(errResponse) {
    					console.error(errResponse);
    					deferred.reject(errResponse);
    				});
    
    		return deferred.promise;
    	}
    });
    

    The view page:

    <%@ include file="/WEB-INF/views/init.jsp"%>
    <!DOCTYPE html>
    <html>
    <body ng-app="bookApp">
    
    	
    <div ng-controller="bookController as ctrl">
    
    <h3>{{message}}</h3>
    
    
    <table class="table">
    			
    <tr>
    				
    <td>Book Title:</td>
    
    
    <td><input type="text" name="bookTitle" ng-model="book.bookTitle" /></td>
    
    			</tr>
    
    
    <tr>
    				
    <td>Author Name:</td>
    
    
    <td><input type="text" name="authorName" ng-model="book.authorName" /></td>
    
    			</tr>
    
    
    <tr>
    				
    <td>Book Description:</td>
    
    
    <td><input type="text" name="bookDescription" ng-model="book.bookDescription" /></td>
    
    			</tr>
    
    
    <tr>
    				
    <td>Book Price:</td>
    
    
    <td><input type="text" name="bookPrice" ng-model="book.bookPrice" /></td>
    
    			</tr>
    
    
    <tr>
    				
    <td>ISBN:</td>
    
    
    <td><input type="text" name="isbn" ng-model="book.isbn" /></td>
    
    			</tr>
    
    
    <tr>
    				
    <td ng-if="action == 'add' "><input type="button" value="Submit" ng-click="add()" /></td>
    
    
    <td ng-if="action == 'update' "><input type="button" value="Update" ng-click="update()" /></td>
    
    
    <td><input type="button" value="Clear" ng-click="clear()" /></td>
    
    			</tr>
    
    		</table>
    
    
    <div>
    
    <h2>List of Books</h2>
    
    
    <table border="1">
    				
    <thead>
    
    <tr>
    						
    <th>Serial No</th>
    
    
    <th>Title</th>
    
    
    <th>Author Name</th>
    
    
    <th>Description</th>
    
    
    <th>Price</th>
    
    
    <th>ISBN</th>
    
    
    <th>Action</th>
    
    					</tr>
    
    				</thead>
    
    
    <tbody>
    					
    <tr ng-repeat="book in ctrl.books">
    						
    <td>{{$index + 1}}</td>
    
    
    <td><span ng-bind="book.bookTitle"></span></td>
    
    
    <td><span ng-bind="book.authorName"></span></td>
    
    
    <td><span ng-bind="book.bookDescription"></span></td>
    
    
    <td><span ng-bind="book.bookPrice"></span></td>
    
    
    <td><span ng-bind="book.isbn"></span></td>
    
    
    <td>
    							<button type="button" ng-click="edit(book)">Edit</button>
    							<button type="button" ng-click="deleteBook(book)">Delete</button>
    						</td>
    
    					</tr>
    
    				</tbody>
    
    			</table>
    
    		</div>
    
    	</div>
    
    
    </body>
    </html>
    

    The flow will look like below 

    spring-angularjs-flow

    Download Source Code:

    spring-angular

    Post Tagged with ,

One Response so far.

  1. Aijaz Mustufa says:

    Very helpful post, thanks a lot Hamidul.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close