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文件夹中了。
源代码
感谢你容忍我烂到天际的文笔看到现在,这是源代码,希望对你有所帮助。
Angular和Spring Boot一起做个项目的更多相关文章
- 八个开源的 Spring Boot 前后端分离项目,一定要收藏!
八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...
- Github点赞超多的Spring Boot学习教程+实战项目推荐!
Github点赞接近 100k 的Spring Boot学习教程+实战项目推荐! 很明显的一个现象,除了一些老项目,现在 Java 后端项目基本都是基于 Spring Boot 进行开发,毕竟它这 ...
- [转] 使用Spring Boot和Gradle创建项目
Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的 ...
- spring cloud和spring boot两个完整项目
spring cloud和spring boot两个完整项目 spring cloud 是基于Spring Cloud的云分布式后台管理系统架构,核心技术采用Eureka.Fegin.Ribbon.Z ...
- Spring Boot 创建hello world项目
Spring Boot 创建hello world项目 1.创建项目 最近在学习Spring Boot,这里记录使用IDEA创建Spring Boot的的过程 在1出勾选,选择2,点击Next 这里填 ...
- Spring Boot构建的Web项目如何在服务端校验表单输入
本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC ...
- 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 ...
- 10个Spring Boot快速开发的项目,接私活利器(快速、高效)
本文为大家精选了 码云 上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架.文件文档系统.秒杀系统.微服务化系统.后台管理系统等,希望能够给大家带来一点帮助:) 1.项目名称:分布式 ...
- Spring Boot + JPA 多模块项目无法注入 JpaRepository 接口
问题描述 Spring Boot + JPA 多模块项目,启动报异常: nested exception is org.springframework.beans.factory.NoSuchBean ...
随机推荐
- Httprequest 获取url 常用方法
HttpServletRequest常用获取URL的方法 1.request.getRequestURL() 返回的是完整的url,包括Http协议,端口号,servlet名字和映射路 ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- 安装Window下Jenkins
之前没接触过持续集成工具,之前只是了解了下自动化部署,最近一直在看自动化集成这块,发现要学的东西好多好多,可能在小公司用的不多,但如果在大公司,如果每个项目都要手动build.deploy的话那也太耗 ...
- JavaScript 的使用基础总结③
JavaScript 中的对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... JavaScript 允许自定义对象. (一)数组 数组对象的作用是:使用单独的变量名来存储 ...
- css3新特性---(border,Background部分)
boder属性新特性: border-radius 设置或检索对象使用圆角边框 border-top-left-radius 设置或检索对象左上角圆角边框 border-top-right-rad ...
- 团队作业4---第一次项目冲刺(ALpha)版本 第七天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 a.完成所有基础功能 b.正在进行测试调试 四.困难与问题 1.随着测试出现了大大小小的一些BUG,但是由于原来写的时候思维定 ...
- 英语词典Alpha版本发布说明
Alpha版本发布说明 功能: ·简洁的应用界面,不被无良的广告弹窗影响 ·功能直接,在需要查词时及时出现,没有每日一句精选文章等杀了你的流量,在学习过程中更加专注! ·采用金山词霸API,提供发音 ...
- 201521123058 java第六次作业
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...
- 201521123045 《Java程序设计》第6周学习总结
Java 第六周总结 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结.注1:关键词与内容不求多,但概念之间的 ...
- 201521044091 《Java程序设计》第3周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 本周学习总结 ...