Background and Pre-request This blog will show you how to build Spring Restful + Hibernate ORM models with AngularJS web application, the example here will use JSON to communicate between Spring controller and AngularJS web UI. After running through our example, you should be able to master Spring Restful and make HTTP JSON request using
Let’s try to create a new Maven Project using Eclipse. Right-click on “Navigator” or “Project Explorer” => select “New” => choose “Maven Project” Click “Next” Select “maven-archetype-webapp”: Click “Next”, and fill in the below values: Click “Finish”, the project SpringRestfulExample has been created: Please rate this Useful?
Under the project, you can find pom.xml file. Right-click this file, and Open With Text Editor: Adding below dependencies: <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/maven-v4_0_0.xsd”> <modelVersion>4.0.0</modelVersion> <groupId>com.itblog</groupId> <artifactId>SpringRestfulExample</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>SpringMVCExample Maven Webapp</name> <url>http://maven.apache.org</url> <properties> <spring.version>4.2.0.RELEASE</spring.version> <hibernate.version>4.3.11.Final</hibernate.version> <javax.validator.version>1.1.0.Final</javax.validator.version> <hibernate.validator.version>5.2.2.Final</hibernate.validator.version> <mysql.connector.version>5.1.31</mysql.connector.version>
Let’s try running the app by right-click the project: Choose “Always use this server when running this project. You can change to other web server, such as JBoss or other if you want to. Simply click finish to run it. Done, it is running!!! Let’s download the java class and necessary files
You can download the schema.sql – Spring4Restful_v01_schema.zip here, and run it with MySQL client. /* create database */ CREATE DATABASE itblogs DEFAULT CHARACTER SET utf8; USE itblogs; CREATE TABLE COMPANY( id BIGINT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, background VARCHAR(255) NOT NULL, PRIMARY KEY (id) ); CREATE TABLE SHOP ( id
If your front-end web UI and back-end restful API are stored in different domains, such as: Due to security reason, web browser will return you with the below error: Please note that even different ports will treat as different origin. In order to allow different domains calling the restful API, you can either:
You can download the Web UI here, extract the zip file as folder “AngularUI”. As we will run the Restful API using Eclipse with port 8080, and Web UI using Tomcat with port 8181, please store the unzip package “AngularUI” under {your_tomcat_installed_path}\webapps\ . You can find CRUD operations from this web UI, which is based
You may find the below (CRUD ) actions from this web UI: HTTP Method Actions GET Get / List record(s) POST Create record PUT Update record DELETE Delete record R – Read the list of customers [GET Method] Let’s go to Customer List page, you can find the list of customers here. The UI
