Spring Boot与Angular2整合项目搭建教程

Spring Boot与Angular2整合项目搭建教程

spring-boot-angular2spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine项目地址:https://gitcode.com/gh_mirrors/sp/spring-boot-angular2

本教程将指导您如何理解和操作从GitHub获取的Spring Boot与Angular2结合的开源项目，该项目展示了如何在同一个服务器上部署Spring Boot后端与Angular前端应用。

1. 项目目录结构及介绍

本项目的目录结构精心设计以支持前后端分离的应用模式，以下是关键部分的概览：

spring-boot-angular2/
|-- src/
|   |-- main/
|       |-- java/
|           |-- (你的包名)/  // 包含Spring Boot主类和其他Java服务组件
|       |-- resources/
|           |-- static/    // 静态资源目录，最终存放打包后的Angular应用
|           |-- templates/ // 如有使用Thymeleaf等模板引擎，则放HTML模板
|       |-- webapp/
|           |-- app/      // 注意：此路径可能误导，实际Angular源代码可能存于其他地方或通过构建工具管理
|   |-- test/
|       |-- java/
|-- gulpfile.js            // Gulp任务定义文件，用于处理前端构建流程
|-- gradle.build           // Gradle构建脚本，控制项目编译、依赖等
|-- package.json           // Angular项目的NPM配置文件，定义了脚本命令和依赖库
|-- README.md               // 项目说明文档

请注意，Angular的实际源码通常位于特定的目录（可能是通过npm初始化的目录），并通过Webpack或其他构建工具编译到static目录下。

2. 项目的启动文件介绍

后端启动

• Spring Boot主类: 一般位于src/main/java/(你的包名)下，通常命名为Application.java或类似命名，包含了启动Spring Boot应用的主要入口点。运行这个类的main方法即可启动REST服务，监听如8080这样的端口。

前端启动

• npm scripts: 在Angular开发阶段，主要通过package.json中的scripts执行。例如，“start”脚本通常用于启动一个开发服务器，如使用lite-server，并监听另一个端口（通常是3000）。

3. 项目的配置文件介绍

• application.properties或application.yml（位于src/main/resources）: Spring Boot的配置文件，设置数据源、服务端口、日志级别等后端相关配置。

• package.json: 控制Angular项目的构建和脚本任务。其中的“scripts”字段定义了诸如编译、启动开发服务器等自定义命令。

• webpack.config.js（如果有）: 负责Angular前端应用的打包配置，转换TypeScript代码，合并文件，以及处理静态资源。

• gulpfile.js: 若项目中使用Gulp，该文件定义了自动化任务，比如前端资源的预处理、压缩等。

要完整运行此项目，首先确保Node.js和Java环境已安装，接着按照README中的步骤安装依赖并分别启动Spring Boot后端与通过npm启动的Angular前端服务。这通常涉及运行Gradle任务来构建整个项目，并且可能需要使用concurrently这样的工具来同时运行后端服务和前端开发服务器。

spring-boot-angular2spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine项目地址:https://gitcode.com/gh_mirrors/sp/spring-boot-angular2