https://github.com/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4
Spring Boot Kotlin Application Template for Thymeleaf3, BootStrap4 and Angularjs 4
https://github.com/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4
Last synced: 9 months ago
JSON representation
Spring Boot Kotlin Application Template for Thymeleaf3, BootStrap4 and Angularjs 4
- Host: GitHub
- URL: https://github.com/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4
- Owner: linux-china
- Created: 2017-03-25T04:21:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-02T07:48:32.000Z (over 8 years ago)
- Last Synced: 2025-06-24T21:16:59.686Z (about 1 year ago)
- Language: TypeScript
- Size: 64.5 KB
- Stars: 42
- Watchers: 10
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Spring Boot Kotlin Application with Thymeleaf 3, BootStrap 4 and Angular 4
==========================================================================
### Technology Stack
* Spring Boot 1.5.9
* Angular 4 with Node 9.3.0 and NPM 5.6.0
* Thymeleaf 3
* BootStrap 4 Beta1 with JQuery 3.2.1
* Kotlin 1.2
### Environment Setup
```bash
$ 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:
```html
```
### AngularJS App Template
```bash
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
* A Maven plugin that downloads/installs Node and NPM locally, runs NPM install, Grunt, Gulp and/or Karma： https://github.com/eirslett/frontend-maven-plugin
* http://www.angulartypescript.com/
* Debug angular in webstorm: https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/
* TypeScript Chinese Document: https://tslang.cn/docs/tutorial.html
* Type search: http://microsoft.github.io/TypeSearch/