引言

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

源代码

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

Angular和Spring Boot一起做个项目的更多相关文章

  1. 八个开源的 Spring Boot 前后端分离项目,一定要收藏!

    八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...

  2. Github点赞超多的Spring Boot学习教程+实战项目推荐!

    Github点赞接近 100k 的Spring Boot学习教程+实战项目推荐!   很明显的一个现象,除了一些老项目,现在 Java 后端项目基本都是基于 Spring Boot 进行开发,毕竟它这 ...

  3. [转] 使用Spring Boot和Gradle创建项目

    Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的 ...

  4. spring cloud和spring boot两个完整项目

    spring cloud和spring boot两个完整项目 spring cloud 是基于Spring Cloud的云分布式后台管理系统架构,核心技术采用Eureka.Fegin.Ribbon.Z ...

  5. Spring Boot 创建hello world项目

    Spring Boot 创建hello world项目 1.创建项目 最近在学习Spring Boot,这里记录使用IDEA创建Spring Boot的的过程 在1出勾选,选择2,点击Next 这里填 ...

  6. Spring Boot构建的Web项目如何在服务端校验表单输入

    本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC ...

  7. Spring Boot 2+gRPC 学习系列1:搭建Spring Boot 2+gRPC本地项目

    Spring Boot 2+gRPC 学习系列1:搭建Spring Boot 2+gRPC本地项目 https://blog.csdn.net/alinyua/article/details/8303 ...

  8. 10个Spring Boot快速开发的项目,接私活利器(快速、高效)

    本文为大家精选了 码云 上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架.文件文档系统.秒杀系统.微服务化系统.后台管理系统等,希望能够给大家带来一点帮助:) 1.项目名称:分布式 ...

  9. Spring Boot + JPA 多模块项目无法注入 JpaRepository 接口

    问题描述 Spring Boot + JPA 多模块项目,启动报异常: nested exception is org.springframework.beans.factory.NoSuchBean ...

随机推荐

  1. 【ACM小白成长撸】--贪婪法解硬币找零问题

    question:假设有一种货币,它有面值为1分.2分.5分和1角的硬币,最少需要多少个硬币来找出K分钱的零钱.按照贪婪法的思想,需要不断地使用面值最大的硬币.如果找零的值小于最大的硬币值,则尝试第二 ...

  2. hdu2546 01背包 重学背包

    题意:给出菜的价钱和自己的余额.使自己余额最少,注意余额大于5的情况可以买任意的菜. 思路:小于5的余额不能买菜,直接输出,大于五的余额,留下5元买最贵的菜,剩下的余额进行01背包,将剩下的余额减去0 ...

  3. Servlet总结一

    Servlet总结一 HttpServlet 想要实现一个servlet必须继承这个类,其实一个servlet就是一个java文件,但是这个类必须是继承HttpServlet. 生命周期 servle ...

  4. 九度OJ 1010 A +B

    #include <iostream> #include <string> #include <sstream> using namespace std; int ...

  5. Java课程设计——博客作业教学数据分析系统(201521123084 林正晟)

    #课程设计--博客作业教学数据分析系统(201521123084 林正晟) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 学生登陆界面的前端实现和与数据库的连接 学生 ...

  6. 微信小程序wx.navigateTo层叠5次限制,特殊情况的建议

    小程序页面的实例使用栈的数据结构存储,栈内元素最多5个(换一种方式说,就是用户最多能点击5次返回),微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法. 小程序三种页面跳转API 的区 ...

  7. 201521123026 《Java程序设计》第5周学习总结

    1. 本章学习总结 尝试使用思维导图总结有关多态与接口的知识点 使用常规方法总结其他上课内容 1.接口的出现时为了实现多态,多态的实现不一定依赖于接口. 2.接口的常见成员有:全局常量和抽象方法. 3 ...

  8. 201521123049 《JAVA程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  9. 201521123079《java程序设计》第14周学习总结

    PTA反馈问卷 雨课堂反馈问卷 本次作业参考文件 数据库PPT MySql操作视频与数据库相关jar文件请参考QQ群文件. 本周课程设计发布 Java课程设计 本周学习总结 1.1 以你喜欢的方式(思 ...

  10. 201521123085 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有 ...