Angular 5+ Frontent with SpringBoot (Java) Backend

An application that demonstrates various parts of a service-oriented REST complete application.

Folder Structure

PROJECT_FOLDER
│  README.md
│  pom.xml           
│  build.gradle
└──[src]      
│  └──[main]      
│     └──[java]      
│     └──[resources]
│        │  application.properties #contains springboot cofigurations
│        │  schema.sql  # Contains DB Script to create tables that executes during the App Startup          
│        │  data.sql    # Contains DB Script to Insert data that executes during the App Startup (after schema.sql)
│        └──[public]    # keep all html,css etc, resources that needs to be exposed to user without security
│
└──[target]              #Java build files, auto-created after running java build: mvn install
│  └──[classes]
│     └──[public]
│     └──[webui]         #webui folder is created by (maven/gradle) which copies webui/dist folder 
│                        #the application.properties file list webui as a resource folder that means files can be accesses http://localhost/<files_inside_webui> 
│
└──[webui]
   │  package.json     
   │  angular-cli.json   #ng build configurations)
   └──[node_modules]
   └──[src]              #frontend source files
   └──[dist]             #frontend build files, auto-created after running angular build: ng -build

Prerequisites

Ensure you have this installed before proceeding further

• Java 8
• Maven 3.3.9+ or Gradle 3.3+
• Node 6.0 or above,
• NPM 5 or above,
• Angular-CLI 1.6.3

About

This is an Restful implementation of an order processing app based on Northwind database schema from Microsoft. The goal of the project is to

• Highlight techniques of making and securing a REST full app using SpringBoot
• How to consume an RESTfull service and make an HTML5 based Single Page App using Angular 4+

Features of the Project

• Backend

  • Token Based Security (using Spring security)
  • API documentation and Live Try-out links with Swagger
  • In Memory DB with H2
  • Using JPA and JDBC template to talk to relational database
  • How to request and respond for paginated data

• Frontend

  • Organizing Components, Services, Directives, Pages etc in an Angular App
  • How to chain RxJS Observables (by making sequntial AJAX request- its different that how you do with promises)
  • Techniques to Lazy load Data (Infinite Scroll)
  • Techniques to load large data set in a data-table but still keeping DOM footprint less
  • Routing and guarding pages that needs authentication
  • Basic visulaization

• Build

  • How to build all in one app that includes (database, sample data, RESTfull API, Auto generated API Docs, frontend and security)
  • Portable app, Ideal for dockers, cloud hosting.

Build Frontend (optional step)

# Navigate to PROJECT_FOLDER/webui (should contain package.json )
npm install
# build the project (this will put the files under dist folder)
ng build --prod --aot=true

Build Backend (SpringBoot Java)

# Maven Build : Navigate to the root folder where pom.xml is present 
mvn clean install

#OR

# Gradle Build : Navigate to the root folder where build.gradle is present 
gradle build

Start the API and WebUI server

# Start the server (9119)
# port and other configurations for API servere is in [./src/main/resources/application.properties](/src/main/resources/application.properties) file

# If you build with maven jar location will be 
java -jar ./target/app-1.0.0.jar

# If you build with gradle jar location will be 
java -jar ./build/libs/app-1.0.0.jar

Project images

Dashboard - Order Stats

Dashboard - Product Stats

Orders

Orders Details

Customers

API Docs - With Live Tryout

API Docs - For redability

Database Schema