引言

最近由于公司人员调整，我不得不去转去做前端，*用三周的时间学习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文件夹中了。

源代码

感谢你容忍我烂到天际的文笔看到现在，这是源代码，希望对你有所帮助。