Application with AngularJS + Spring Boot

In this tutorial, we will look at the application with AngularJS on the front-end and Spring-Boot in the back end.

AngularJS is a JavaScript-based open-source front-end web application framework developed to address many of the challenges encountered in developing single-page applications. More information at https://angularjs.org/

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run". Spring Boot favors convention over configuration and is designed to get you up and running as quickly as possible.More information at https://projects.spring.io/spring-boot/

Restangular is an AngularJS service that simplifies common GET, POST, DELETE, and UPDATE requests with a minimum of client code. It's a perfect fit for any WebApp that consumes data from a RESTful API. More information at https://github.com/mgonto/restangular.

AngularJS Toaster is an AngularJS port of the toastr non-blocking notification jQuery library. More information at https://github.com/jirikavi/AngularJS-Toaster

Run bower install in project root folder this will download all front-end dependencies.

Find this project on Github

https://github.com/javacodenet/ng-spring

Download the source code zip

Download

pom.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<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/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.javacodenet</groupId>
	<artifactId>ng-spring</artifactId>
	<version>1.0-SNAPSHOT</version>

	<parent>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-parent</artifactId>
	<version>1.4.6.RELEASE</version>
	</parent>

	<dependencies>
	<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
	</dependency>
	<dependency>
	<groupId>com.h2database</groupId>
	<artifactId>h2</artifactId>
	</dependency>

	</dependencies>

	<build>
	<plugins>
	<plugin>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-maven-plugin</artifactId>
	</plugin>
	<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-compiler-plugin</artifactId>
	<configuration>
	<source>1.8</source>
	<target>1.8</target>
	</configuration>
	</plugin>
	</plugins>
	</build>

	</project>

view raw pom.xml hosted with ❤ by GitHub

EmployeeRestController.java

	package com.test.controllers;

	import com.test.dto.EmployeeDTO;
	import com.test.service.EmployeeService;
	import org.hibernate.service.spi.InjectService;
	import org.springframework.beans.factory.annotation.Autowired;
	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.RestController;

	import java.util.Arrays;
	import java.util.List;

	@RestController
	@RequestMapping("/employee")
	public class EmployeeRestController {

	private EmployeeService employeeService;

	@Autowired
	public EmployeeRestController(EmployeeService employeeService) {
	this.employeeService = employeeService;
	}

	@RequestMapping(method = RequestMethod.GET)
	public List<EmployeeDTO> list() {
	return employeeService.getEmployees();
	}

	@RequestMapping(method = RequestMethod.PUT)
	public boolean updateEmployee(@RequestBody EmployeeDTO employee) {
	return employeeService.updateEmployee(employee);
	}

	@RequestMapping(method = RequestMethod.POST)
	public boolean saveEmployee(@RequestBody EmployeeDTO employee) {
	return employeeService.saveEmployee(employee);
	}

	@RequestMapping(value="{id}", method = RequestMethod.DELETE)
	public boolean deleteEmployee(@PathVariable Integer id) {
	return employeeService.deleteEmployee(id);
	}

	}

view raw EmployeeRestController.java hosted with ❤ by GitHub

EmployeeDTO.java

	package com.test.dto;

	import java.io.Serializable;

	public class EmployeeDTO implements Serializable{
	private String id;
	private String name;
	private String company;

	public String getId() {
	return id;
	}

	public void setId(String id) {
	this.id = id;
	}

	public String getName() {
	return name;
	}

	public void setName(String name) {
	this.name = name;
	}

	public String getCompany() {
	return company;
	}

	public void setCompany(String company) {
	this.company = company;
	}
	}

view raw EmployeeDTO.java hosted with ❤ by GitHub

Employee.java

	package com.test.entity;

	import javax.persistence.Column;
	import javax.persistence.Entity;
	import javax.persistence.GeneratedValue;
	import javax.persistence.Id;

	@Entity
	public class Employee {

	@Id
	private String id;

	@Column
	private String name;

	@Column
	private String company;

	public String getId() {
	return id;
	}

	public void setId(String id) {
	this.id = id;
	}

	public String getName() {
	return name;
	}

	public void setName(String name) {
	this.name = name;
	}

	public String getCompany() {
	return company;
	}

	public void setCompany(String company) {
	this.company = company;
	}
	}

view raw Employee.java hosted with ❤ by GitHub

EmployeeRepository.java

	package com.test.entity;

	import org.springframework.data.jpa.repository.JpaRepository;

	public interface EmployeeRepository extends JpaRepository<Employee, String> {
	}

view raw EmployeeRepository.java hosted with ❤ by GitHub

EmployeeService.java

	package com.test.service;

	import com.test.dto.EmployeeDTO;
	import com.test.entity.Employee;
	import com.test.entity.EmployeeRepository;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.stereotype.Component;

	import java.util.List;
	import java.util.stream.Collectors;

	@Component
	public class EmployeeService {
	private EmployeeRepository employeeRepository;

	@Autowired
	public EmployeeService(EmployeeRepository employeeRepository) {
	this.employeeRepository = employeeRepository;
	}

	public List<EmployeeDTO> getEmployees() {
	List<Employee> employees = employeeRepository.findAll();
	return employees
	.stream()
	.map(this::getEmployeeDTO)
	.collect(Collectors.toList());
	}

	private EmployeeDTO getEmployeeDTO(Employee e) {
	EmployeeDTO employeeDTO = new EmployeeDTO();
	employeeDTO.setId(e.getId());
	employeeDTO.setName(e.getName());
	employeeDTO.setCompany(e.getCompany());
	return employeeDTO;
	}

	public boolean saveEmployee(EmployeeDTO employeeDto) {
	employeeRepository.save(getEmployee(employeeDto));
	return true;
	}

	private Employee getEmployee(EmployeeDTO employeeDto) {
	Employee employee = new Employee();
	employee.setId(employeeDto.getId());
	employee.setName(employeeDto.getName());
	employee.setCompany(employeeDto.getCompany());
	return employee;
	}

	public boolean updateEmployee(EmployeeDTO employee) {
	employeeRepository.save(getEmployee(employee));
	return true;
	}

	public boolean deleteEmployee(Integer id) {
	employeeRepository.delete(id.toString());
	return true;
	}
	}

view raw EmployeeService.java hosted with ❤ by GitHub

Application.java

	package com.test;

	import org.springframework.boot.SpringApplication;
	import org.springframework.boot.autoconfigure.SpringBootApplication;

	@SpringBootApplication
	public class Application {
	public static void main(String[] args) {
	SpringApplication.run(Application.class, args);
	}
	}

view raw Application.java hosted with ❤ by GitHub

app.js

	(function(angular) {
	angular.module("employeeApp.controllers", []);
	angular.module("employeeApp.services", []);
	angular.module("employeeApp", ['restangular', 'toaster', 'ngAnimate']);
	}(angular));

view raw app.js hosted with ❤ by GitHub

restangular-services.js

	(function (angular) {
	function restangularService(Restangular) {
	return Restangular.withConfig(function (RestangularConfigurer) {
	var newBaseUrl = window.location.href.substring(0, window.location.href);
	RestangularConfigurer.setBaseUrl(newBaseUrl);
	});
	}

	angular.module("employeeApp")
	.factory('RestangularService', ['Restangular', restangularService]);

	}(angular));

view raw restangular-services.js hosted with ❤ by GitHub

controllers.js

	(function (angular) {
	function employeeController($scope, employeeService, toaster) {
	var _this = this;

	_this.getEmployees = function () {
	employeeService.getEmployees().then(function (response) {
	_this.employees = response ? response : [];
	if(!_this.employees \|\| _this.employees.length == 0) {
	toaster.pop('info', null, 'No Employees Present');
	}
	});
	};

	_this.saveEmployee = function (employee) {
	employeeService.saveEmployee(employee).then(function (success) {
	if(success) {
	_this.isEmployeeSaved = true;
	_this.getEmployees();
	toaster.pop('success', null, employee.name + ' saved successfully');
	}
	});
	};

	_this.updateEmployee = function (employee) {
	employeeService.updateEmployee(employee).then(function (success) {
	if(success) {
	_this.isEmployeeUpdated = true;
	employee.isEditMode = false;
	toaster.pop('success', null, employee.name + ' updated successfully');
	}
	});
	};

	_this.deleteEmployee = function (employee) {
	employeeService.deleteEmployee(employee).then(function (success) {
	if(success) {
	_this.getEmployees();
	toaster.pop('success', null, employee.name + ' deleted successfully');
	}
	});
	};
	}

	employeeController.$inject = ['$scope', 'employeeService', 'toaster'];
	angular.module("employeeApp").controller("employeeController", employeeController);
	}(angular));

view raw controllers.js hosted with ❤ by GitHub

services.js

	(function (angular) {
	function employeeService(RestangularService) {
	return {
	getEmployees: getEmployees,
	saveEmployee: saveEmployee,
	updateEmployee: updateEmployee,
	deleteEmployee: deleteEmployee
	};

	function getEmployees() {
	return RestangularService.one('employee').get();
	}

	function saveEmployee(employee) {
	return RestangularService.all('employee').post(employee);
	}

	function updateEmployee(employee) {
	return RestangularService.one('employee').customPUT(employee);
	}

	function deleteEmployee(employee) {
	return RestangularService.one('employee').one(employee.id).remove();
	}
	}

	employeeService.$inject = ['RestangularService'];
	angular.module("employeeApp").factory("employeeService", employeeService);
	}(angular));

view raw services.js hosted with ❤ by GitHub

index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./app/bower_components/bootstrap-css-only/css/bootstrap.min.css"/>
	<link href="./app/bower_components/AngularJS-Toaster/toaster.css" rel="stylesheet"/>
	<title>Employees</title>
	</head>
	<body ng-app="employeeApp">

	<div ng-controller="employeeController as empCtrl" class="col-lg-9">
	<div class="panel-body col-lg-3">
	<button class="btn btn-default" type="submit" title="Add" ng-click="empCtrl.getEmployees()">
	GET Employees
	</button>
	<div ng-repeat="employee in empCtrl.employees">
	<div ng-if="!employee.isEditMode">
	<p>{{employee.id}}</p>
	<p>{{employee.name}}</p>
	<p>{{employee.company}}</p>
	</div>
	<div ng-if="employee.isEditMode">
	<input type="text" ng-model="employee.id"/><br/>
	<input type="text" ng-model="employee.name"/><br/>
	<input type="text" ng-model="employee.company"/><br/>
	</div>
	<a href="#" ng-if="!employee.isEditMode" ng-click="employee.isEditMode = true" class="btn btn-default"><span
	class="glyphicon glyphicon-pencil"></span> Edit</a>
	<a href="#" ng-if="!employee.isEditMode" ng-click="empCtrl.deleteEmployee(employee)"
	class="btn btn-default"><span
	class="glyphicon glyphicon-trash"></span> Delete</a>
	<a href="#" ng-if="employee.isEditMode" ng-click="empCtrl.updateEmployee(employee)" class="btn btn-default"><span
	class="glyphicon glyphicon-save"></span> save</a>
	</div>
	</div>

	<div class="panel-body col-lg-6">
	<form class="form-horizontal" role="form" ng-submit="empCtrl.saveEmployee(empCtrl.newEmployee)">
	<table>
	<tr>
	<td>
	<label>Employee id</label>
	</td>

	<td>
	<input type="text" ng-model="empCtrl.newEmployee.id"/><br/>
	</td>
	</tr>
	<tr>
	<td>
	<label>Employee Name</label>
	</td>
	<td>
	<input type="text" ng-model="empCtrl.newEmployee.name"/><br/>
	</td>
	</tr>
	<tr>
	<td>
	<label>Employee Company</label>
	</td>
	<td>
	<input type="text" ng-model="empCtrl.newEmployee.company"/><br/>
	</td>
	</tr>
	<tr>
	<td>
	<button class="btn btn-default" type="submit" title="Add">
	Add Employee
	</button>
	</td>
	</tr>
	</table>
	</form>
	</div>
	</div>
	<toaster-container></toaster-container>

	<script type="text/javascript" src="./app/bower_components/angular/angular.min.js"></script>
	<script src="./app/bower_components/angular-animate/angular-animate.min.js"></script>
	<script src="./app/bower_components/AngularJS-Toaster/toaster.min.js"></script>
	<script type="text/javascript" src="./app/bower_components/lodash/dist/lodash.min.js"></script>
	<script type="text/javascript" src="./app/bower_components/restangular/dist/restangular.min.js"></script>
	<script type="text/javascript" src="./app/app.js"></script>
	<script type="text/javascript" src="./app/common-services/restangular-services.js"></script>
	<script type="text/javascript" src="./app/controllers.js"></script>
	<script type="text/javascript" src="./app/services.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

application.properties

spring.jpa.generate-ddl=true

view raw application.properties hosted with ❤ by GitHub

bower.json

	{
	"name": "Employee App",
	"version": "1.0.0",
	"appPath": "src/main/resources/static/app",
	"dependencies": {
	"angular": "1.6.4",
	"bootstrap": "~3.3.0",
	"bootstrap-css-only": "~3.2.0",
	"restangular": "~1.5.1",
	"lodash": "^4.17.4",
	"angular-animate": "^1.6.4",
	"AngularJS-Toaster": "angularjs-toaster#^2.1.0"
	}
	}

view raw bower.json hosted with ❤ by GitHub

Search This Blog

Java Code Net