Angular2-springboot

This example shows how to use angular 2 application with java Spring MVC with help of RestController.

Here you can see following things.

Server Side

• SpringBoot
• Maven 3+
• JAVA 8
• Spring MVC architecture
• RestController
• Mysql Database | H2 Database

Frontend side

• Angular2 Components
• Pagination
• Modal
• CRUD Functionality (Create, Read(view/display), Update, Delete)
• Single Page Application
• Routing | Router outlet | Router

How to Setup this project

Backend

• Maven 3+
• Java 8

Frontend

• Clone project, Open cmd or Node js Command prompt
• npm install -g angular-cli to install angular 2 cli ( globally )
• npm install to install Node packages

How to Run

Backend

• mvn clean install to clean if exists files and install packages
• mvn spring-boot:run to start spring boot

Frontend

• ng serve

Screenshots of Demo

Angular2+SpringBoot+Mysql CRUD Example
Detail/View person
Delete person
Edit person

Guide to Build and Run Project

When you Import this project, You need to fulfill the requirements.

If you have imported project in eclipse, Follow this steps to build project:

1. Right click on project > Properties > Java Build path
2. Change your JDK if 1.8 is not set.
3. You need Maven 3+ configured in your system (or You can download Maven 3+ from here)
4. Once you setup with all this things, Right click on project > Run as > Maven clean (you can directly do this using mvn clean command in cmd at specific project dir)
5. Again right click on project, Find Maven > in options, Click on Update project check Update snapshots forcefully option and press ok.
6. Now you can refresh your project. Run clean and build project.
7. Main Important step > Right click on project > Run as > Maven Install This step will install required dependency specified in pom.xml file

Now as per your question, QPerson is missing Once you follow above steps it will be generated automatically in ../Project_Dir/target/net/../server/model/QPerson.java

You may have question that how this was generated ? If you observed libraries (Dependencies) in pom.xml ,

<dependency>
	<groupId>com.h2database</groupId>
	<artifactId>h2</artifactId>
	<scope>runtime</scope>
</dependency>

You need to know more about H2 Database. H2 is a relational database management system written in Java. It can be embedded in Java applications or run in the client-server mode.

• Very fast, open source, JDBC API
• Embedded and server modes; in-memory databases (Simple meaning => data will not persist on the disk)
• lightweight Java database
• It can be embedded in Java applications or run in the client-server mode Whatever things (Objects, String or anything) you want to store in H2 you can. In this example, whatever values you want to store (CRUD operations), it will be retain in H2 Database till you shutdown your tomcat.(or other servers). Hope so you will get idea about this things.

---

References:

This example is made with help of zouabimourad - SpringBoot and Angular 2 and websystique | UI made in angular 1

How to Contribute

If you like this Example and you want help and keep this project successful then contribute your time to improve the source code and let other know about Angular 2. Because this build for newbies to undestand the flow of CRUD with Angular2-Spring.