/spring-boot-thymeleaf3-bootstrap4-angular4

Spring Boot Kotlin Application Template for Thymeleaf3, BootStrap4 and Angularjs 4

Primary LanguageTypeScript

Spring Boot Kotlin Application with Thymeleaf 3, BootStrap 4 and Angular 4

Technology Stack

  • Spring Boot 1.5.2
  • Angular 4 with Node 7.8.0 and NPM 4.4.4
  • Thymeleaf 3
  • BootStrap 4 Alpha6 with JQuery 3.1.1
  • Kotlin 1.1

Environment Setup

$ brew install nodejs
$ brew install golang
$ brew install go
$ brew install typescript
$ npm install -g @angular/cli

Development

Please "cd src/main/frontend" and execute "npm start" to start Angular server then write Angular code. Angular server will use "src/main/frontend/proxy.conf.json" to reverse API call to Spring Boot.

  • install modules: cd src/main/frontend & npm install
  • mvn -DskipTests clean package
  • reference resource in template layout page. Add following code in you thymeleaf layout page:
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

AngularJS App Template

cd src/main
ng new --skip-install=true frontend

Vocabulary

  • Component: Application Building Blocks
  • Routing: Drive Application Design
  • Services: Encapsulate(封装) Application Logic
  • Modules: Compartmentalize(划分) Concerns
  • Styling: Angular Material2 Module
  • Directives and Pipes: Templates on Steroids

Commands

  • generate component: ng g component menu
  • generate service: ng g service account
  • generate class: ng g class account

Code Structure

Domain Driven Design is good architecture to arrange code:

assets
  demo.jpg
app
  types.ts
  components
     menu
        menu.component.ts
        menu.component.html
        menu.component.css
     app.module.ts
  domain
     model
       account.ts: entity, vo 
       account.repository.ts: repository
     service:
       account-service.ts
     specification
       account-spec.ts
     infrastructure
       cache.service.ts
  app.module.ts

some idea:

  • entity, value object are all interface in TS
  • repository and service are the class in TS

TypeScript

  • variable and parameter null check: let name: string|null

Features

  • ng proxy to spring boot application
  • frontend-maven-plugin to help to build angular app with Spring Boot

Reference