引言 最近由於公司人員調整，我不得不去轉去做前端，被迫用三周的時間學習Angular，同時需要做一個簡單的Web聊天室。對於前端不一點感冒的我而言，其實還算一個不小的挑戰。在三周的過程中，我遇到很多的困難，其中一個困難是如何將Aangular和我已會的Java體系相結合。我不太習慣前後端分離，還是希 ...
引言
最近由於公司人員調整，我不得不去轉去做前端，被迫用三周的時間學習Angular，同時需要做一個簡單的Web聊天室。對於前端不一點感冒的我而言，其實還算一個不小的挑戰。在三周的過程中，我遇到很多的困難，其中一個困難是如何將Aangular和我已會的Java體系相結合。我不太習慣前後端分離，還是希望可以能夠將頁面和Java代碼寫在一個項目里，算得上一個落伍的執著吧。
Angular(包括2和4)是從AngularJs1.x升級而來，但是不提供向下相容。Anuglar2(和4)和AngularJs1.x的一個很大不同，便是Angular使用了TypeScript，而1.x則使用了JavaScript，也是兩者不能相容的一個很重要的原因(如果有其他的原因的話)。目前現代瀏覽器均不直接支持TypeScript(可能存在間接支持的情況，不確定的事情還是不要打保票了)，因此，我不能像AngularJs1.x那樣，直接將Angular引入到JSP中。查過很多資料，按照別人的思路將Angular和JavaWeb(以SpirngMVC為主)項目結合起來，但是看著別人說是可以跑通的，但是自己怎麼跑都不行，就算直接用別人的源代碼也行，搞得我相當鬱悶。
解決方案
雖然通過查找資料沒有解決我的問題，但是我還是獲得很大收穫。TypeScript畢竟是JavaScript的一個超集，本質上還是JavaScript。Angular雖然是用TypeScript寫的，但是在編譯之後本質上和html、css、js文件沒有什麼兩樣，因此我沒有必要將Angular的代碼放進JavaWeb裡面，而是將Angular編譯之後的靜態文件放入JavaWeb項目中就可以了。
在我這個項目中我使用Spring Boot作為後端的框架，maven作為構建工具，那麼在main目錄下使用@angular/cli工具新建一個angular項目，名字就叫做angular吧。Spring Boot項目中一般將靜態資源放在resources目錄下的static文件夾中，為了方便編譯，可以把Angular中的.angular-cli.json文件中apps下的outDir設置為“../resources/static”。
Angular頁面使用VSCode開發，Spring Boot則使用idea。當我們啟動項目或打包的時候需要使用ng build去編譯angular代碼，由於我修改.angular-cli.json的配置，編譯後的代碼將不會放在預設的dist目錄下，而是在spring boot中的resources的static文件夾中了。
源代碼
感謝你容忍我爛到天際的文筆看到現在，這是源代碼，希望對你有所幫助。
