Angular和Spring Boot作为一个单独的应用程序
先决条件:有Spring Boot, Gradle和Angular的经验。
概念:
这篇博客将让你了解如何使用Gradle将Angular和Java代码构建为一个WAR/JAR。
什么是Spring Boot?
Spring Boot是一个独立的应用程序，它减少了一些繁琐的开发步骤以及样板代码和配置。它帮助我们创建一个web应用程序作为一个独立的JAR文件，没有XML配置和嵌入式web服务器。它还将应用程序与所有必要的依赖项捆绑在一起。
什么是Angular?
Angular是一个使用HTML和TypeScript构建单页客户端应用程序的平台和框架。Angular是用TypeScript编写的。它将核心和可选功能作为一组TypeScript库来实现，你可以将这些库导入到你的应用程序中。
让我们创建一个Spring Boot应用程序，它使用Gradle构建脚本封装Angular项目和Java(后端)。
技术:
- Spring Boot 2.4.1 RELEASE
- H2数据库
- Spring Data JPA
- Tomcat嵌入9.0.41
- Gradle 6.7.1
- Java 8
- 引导
在这个项目中，Spring Tools Suit被用作IDE。下面是创建应用程序所执行的步骤。
- 用H2数据库、Spring Data JPA和Spring Web依赖项创建一个Spring Starter项目。
- 创建所需的模型、控制器和存储库。
- 在项目文件夹中创建一个包含模型、组件和服务的Angular应用程序
angular项目应该创建在Spring Boot项目文件夹中。如果它是一个已经存在的Angular应用，只需将它添加到Spring Boot项目文件夹中。
构建脚本
- 创建一个Gradle脚本来运行整个Spring Boot项目。
插件{id 'org.springframework。启动“版本”2.4.1,id“io.spring.dependency-management版本”1.0.10。释放' id 'java'}应用插件:'war' group = 'org. org。目标' version = '0.0.1-SNAPSHOT' sourceCompatibility = '1.8' repositories {mavenCentral()} task deleteStaticFolder(type: Delete) {def dirName = "src/main/resources/static" file(dirName).list()。每个{f ->删除"${dirName}/${f}"}} processResources.dependsOn('application-frontend:build') dependencies {implementation 'org.springframework。引导:spring- Boot -start -data-jpa' implementation 'org.springframework。spring-boot-start -web' runtimeOnly 'com。h2database:h2' testimplemimplementation 'org.springframework。spring-boot-start -test'} test {useJUnitPlatform()}
- 在Angular项目中再创建一个Gradle Script来构建Angular项目
插件{id "com.github.node-gradle。node" version "3.0.0-rc6"} version '0.0.1' node {version = '14.15.4' npmVersion = '6.14.10' download = true workDir = file("${project.buildDir}/node") nodeModulesDir = file("${project.projectDir}")}任务构建(type: NpmTask) {args = ['run'， 'build']}/ /build. dependson (npm_install) //frontend:build将在processResources .build之前运行
- 在Spring Boot项目中创建一个Gradle设置文件，该文件定义了根项目和内部项目的名称。
只有将子项目包含在“设置”中，才会构建子项目。Gradle”文件。
- 如何让Spring Boot运行Angular应用程序?
我们应该将“outputPath”属性的值改为“..”/src/main/resources/static”，这样生成的bundle就会被放到Spring Boot的resources/static文件夹中。
{"$schema": "./node_modules/@angular/cli/lib/config/schema. "json"， "version": 1， "newProjectRoot": "projects"， "projects": {"application-frontend": {"projectType": "application"， "schematics": {}， "root": "" "， "sourceRoot": "src"， "prefix": "app"， "architect": {"build": {"builder": "@angular-devkit/build-angular:browser"， "options": {"outputPath": "../src/main/resources/static"， "index": "src/index.html"， "main": "src/main. html"。Ts "， "polyfills": "src/polyfills. "ts"， "tsConfig": "tsConfig .app. ts"， "tsConfig .app. ts"。Json "， "aot": true， "assets": ["src/favicon.ico"， "src/assets"
- “outputPath”被设置为Spring Boot应用程序的资源文件夹中的静态位置
- 您可以在以下文件夹中找到生成的WAR文件
- 输出:
