{"id":18559128,"url":"https://github.com/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4","last_synced_at":"2025-10-12T19:47:08.701Z","repository":{"id":136596352,"uuid":"86132090","full_name":"linux-china/spring-boot-thymeleaf3-bootstrap4-angular4","owner":"linux-china","description":"Spring Boot Kotlin Application Template for Thymeleaf3, BootStrap4 and Angularjs 4","archived":false,"fork":false,"pushed_at":"2018-01-02T07:48:32.000Z","size":66,"stargazers_count":42,"open_issues_count":1,"forks_count":16,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-24T21:16:59.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linux-china.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-25T04:21:10.000Z","updated_at":"2021-12-07T12:33:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"df609d4f-d5a7-4be5-9523-93a7997b8a31","html_url":"https://github.com/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linux-china","download_url":"https://codeload.github.com/linux-china/spring-boot-thymeleaf3-bootstrap4-angular4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262164282,"owners_count":23268780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T21:42:07.792Z","updated_at":"2025-10-12T19:47:03.666Z","avatar_url":"https://github.com/linux-china.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Spring Boot Kotlin Application with Thymeleaf 3, BootStrap 4 and Angular 4\n==========================================================================\n\n\n### Technology Stack\n\n* Spring Boot 1.5.9\n* Angular 4 with Node 9.3.0 and NPM 5.6.0\n* Thymeleaf 3\n* BootStrap 4 Beta1 with JQuery 3.2.1\n* Kotlin 1.2\n\n### Environment Setup\n\n```bash\n$ brew install nodejs\n$ brew install golang\n$ brew install go\n$ brew install typescript\n$ npm install -g @angular/cli\n```\n\n### Development\n\nPlease \"cd src/main/frontend\" and execute \"npm start\" to start Angular server then write Angular code.\nAngular server will use \"src/main/frontend/proxy.conf.json\" to reverse API call to Spring Boot.\n\n* install modules: cd src/main/frontend \u0026 npm install\n* mvn -DskipTests clean package\n* reference resource in template layout page. Add following code in you thymeleaf layout page:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"inline.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"polyfills.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"styles.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"vendor.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"main.bundle.js\"\u003e\u003c/script\u003e\n```\n\n### AngularJS App Template\n\n```bash\ncd src/main\nng new --skip-install=true frontend\n```\n\n### Vocabulary\n\n* Component: Application Building Blocks\n* Routing: Drive Application Design\n* Services: Encapsulate(封装) Application Logic\n* Modules: Compartmentalize(划分) Concerns\n* Styling: Angular Material2 Module\n* Directives and Pipes: Templates on Steroids\n\n### Commands\n\n* generate component: ng g component menu\n* generate service: ng g service account\n* generate class: ng g class account\n\n### Code Structure\nDomain Driven Design is good architecture to arrange code:\n\n```\nassets\n  demo.jpg\napp\n  types.ts\n  components\n     menu\n        menu.component.ts\n        menu.component.html\n        menu.component.css\n     app.module.ts\n  domain\n     model\n       account.ts: entity, vo \n       account.repository.ts: repository\n     service:\n       account-service.ts\n     specification\n       account-spec.ts\n     infrastructure\n       cache.service.ts\n  app.module.ts\n```\nsome idea:\n\n* entity, value object are all interface in TS\n* repository and service are the class in TS\n\n### TypeScript\n\n* variable and parameter null check: let name: string|null\n\n### Features\n\n* ng proxy to spring boot application\n* frontend-maven-plugin to help to build angular app with Spring Boot\n\n### Reference\n\n* 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\n* http://www.angulartypescript.com/\n* Debug angular in webstorm:  https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/\n* TypeScript Chinese Document: https://tslang.cn/docs/tutorial.html\n* Type search: http://microsoft.github.io/TypeSearch/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinux-china%2Fspring-boot-thymeleaf3-bootstrap4-angular4/lists"}