search

rakshitshah94 / Angular2-SpringBoot-Example

Normal CRUD operation with Angular 2 and spring boot.(Modified with edit and create functionality V1.2) is available at >
https://github.com/zouabimourad/angular2-spring
GNU General Public License v3.0
54 stars 72 forks source link
angular2-springboot crud java-spring-mvc spring-boot

readme

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

SpringBoot+Angular2 Application

Read/View Person Details

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](https://maven.apache.org/download.cgi)) 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](https://github.com/rakshitshah94/Angular2-SpringBoot-Example/blob/master/server/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 , ``` com.h2database h2 runtime ``` You need to know more about [H2 Database](https://en.wikipedia.org/wiki/H2_(DBMS)). 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.

If you like this work, Share your some love, That will be appreciated!

Buy Me A Coffee

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.