Spring Boot和Angular 2入门食谱

我主要是一名服务开发人员，必须不时创建一些可传递的UI。 我精通基于AngularJS1的基本UI，并且可以使用之前概述的方法来完成工作。 遗憾的是，随着Angular 2的出现，我不得不将以前的方法抛诸脑后，而现在使用Spring Boot / Angular 2的方法也能很好地工作。

该方法本质上适用于以下事实： Spring Boot Web应用程序在非常特定的位置中查找静态内容–从项目根目录开始的src / main / resources / static文件夹，因此如果我可以将最终的js内容放入该文件夹，那我很黄金。

因此，让我们跳进去。

先决条件

首先有一个先决条件– 出色的angular-cli工具 ，这对像我这样不懂UI的开发人员来说是一种幸运。

第二个可选但有用的前提条件是此处介绍的Spring-Boot CLI工具

生成SPA项目

给定这两个工具，首先通过从http://start.spring.io开始或使用以下CLI命令创建一个Spring Boot Web项目：

spring init --dependencies=web spring-boot-angular2-static-sample

此时，应该已经在spring-boot-angular2-static-sample文件夹中生成了一个启动程序项目。 从该文件夹使用angular-cli生成一个Angular 2项目。

ng init

更改angular-cli构建工件的位置，编辑angular-cli.json并进行如下修改：

现在构建静态内容：

ng build

这应该将静态内容获取到src / main / resources / static文件夹中。 并启动Spring-Boot应用程序：

mvn spring-boot:run

并且基于AngularJS2的UI应该呈现清晰！

实时重载

使用Angular-cli的优势之一是它附带的出色的工具链–其中之一就是能够进行更改并将其反映在UI上。 此功能在此处记录的方法中丢失了，其中UI可能主要由Spring-Boot项目上托管的服务驱动。 但是，要恢复AngularJS2开发上的实时重新加载功能很困难。

首先代理后端，创建一个proxy.conf.json文件，其条目如下所示：

{"/api": {"target": "http://localhost:8080","secure": false} }

并使用以下命令启动Angular-cli服务器：

ng serve --proxy-config proxy.conf.json

并使用以下命令独立启动服务器部分：

mvn spring-boot:run

就是这样，现在可以独立于服务器端API进行UI开发了！ 要获得更大的成功，只需使用Spring Boot附带的出色devtools即可在服务器端获得实时重载（更多重启）功能。

结论

这是我可能要创建的任何基本UI的配方，这种方法对于大型项目可能不是理想的选择，但对于小型内部项目则应该是完美的选择。 我在这里的github仓库中有一个示例启动器，其中带有一个后端调用。

翻译自: https://www.javacodegeeks.com/2016/11/recipe-getting-started-spring-boot-angular-2.html

总结

以上是生活随笔为你收集整理的Spring Boot和Angular 2入门食谱的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。