SpringBoot-Angular-Application: A JavaScript repository from webmaster1022

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