引言
最近由于公司人员调整,我不得不去转去做前端,被迫用三周的时间学习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文件夹中了。
源代码
感谢你容忍我烂到天际的文笔看到现在,这是源代码,希望对你有所帮助。