我主要是一名服務開發人員，必須不時創建一些可傳遞的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入门食谱的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。