Spring Boot-Angular2 Realtime Dashboard

Overview

This project demonstrate the upcoming AngularJS 2 and integrating it with Spring Boot. It will also demo some hot features of Spring Boot such as realtime programming using Websocket + Stomp. Most of the backend code are written in Groovy, instead of Java. Most of them are still looks Java, but there are some major improvements over Java in object initialising. There are 2 routes (pages) in the application

• http://localhost:8080/ The root page. This page will show a list of polls. Clicking on one of those will show the poll details with choices. Try to open the page in multiple browsers (or multiple tabs). Notice that when you change a poll, or select a choice, that action will be synchronized in all other browsers.
• http://localhost:8080/dashboard --> The Dashboard page. This show the statistics of the polls, using a Pie chart. When you submit the poll in another browser(tab), the dashboard will be updated immediately in real time. All in all, it is very straightforward to develop a realtime application in Spring Boot. You don't need NodeJS for that. And Java/Groovy is far more powerful and easier to maintain in the long run.

Technology stacks

• Spring Boot
• Java & Groovy
• AngularJS 2 + TypeScript
• MySQL
• Websocket (STOMP + SockJS)

Dependencies

• Java 8
• Gradle
• NodeJS & NPM
• MySQL

Building and starting Spring boot

1. First we need to download all the front-end dependencies cd src/main/resources/public npm install

2. Run the SQL scripts to create the tables and the initial data You can either run them manually in a MySQL client, or rename them to data.sql and schema.sql respectively. Spring Boot will run them automatically when the application starts. The catch is you will need to rename them back or the next time you start the app, Spring Boot will try to run them again.

3. Change to the root folder of the project and start Spring Boot gradle bootRun

4. The application can now be accessed at http://localhost:8080 The default username and password is admin/admin. You can change them in application.properties