zoukankan      html  css  js  c++  java
  • Angular和Spring Boot一起做个项目

    引言

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

    源代码

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

  • 相关阅读:
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    FFmpeg解码H264及swscale缩放详解
    linux中cat more less head tail 命令区别
    C语言字符串操作总结大全(超详细)
    如何使用eclipse进行嵌入式Linux的开发
  • 原文地址:https://www.cnblogs.com/xiao2/p/7663806.html
Copyright © 2011-2022 走看看