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 ...
随机推荐
- 百度AI开放平台- API实战调用
百度AI开放平台- API实战调用 一. 前言 首先说一下项目需求. 两个用户,分别上传了两段不同的文字,要计算两段文字相似度有多少,匹配数据库中的符合条件的数据,初步估计列出来会有60-1 ...
- C# WinForm 跨线程访问控件
问题出现: 在WinForm 处理多线程访问主线程的控件时候,就会出现如图所示的错误对话框: 解决方案: 方案一:去掉线程访问主线程UI控件的安全检查,使用: Control.CheckFor ...
- c++ Lambda函数学习
或许,Lambda 表达式算得上是 C++ 11 新增特性中最激动人心的一个.这个全新的特性听起来很深奥,但却是很多其他语言早已提供(比如 C#)或者即将提供(比如 Java)的.简而言之,Lambd ...
- JQuery中的表单验证及相关的内容
前 言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...
- JAVA基础第八组(5道题)
36. 37. 38.[程序38] 题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. package com.niit.homework1; import java.u ...
- 201521123048 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { re ...
- 201521123079《java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123092《java程序设计》第六周学习总结
1.本周学习总结 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2.书面作业 1.clone方法 1.1 Object对象中的clo ...
- 201521123018 《Java程序设计》第4周学习总结
1. 本章学习总结 2. 书面作业 Q1.注释的应用:使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对象设计(大作业1-非常重要) 2.1 讲故事 ...
- thinkphp介绍及访问方式
ThinkPHP框架 1.解压到www目录下,里面有一个index文件是入口文件,通过修改里面的APP_PATH进入不同的应用 2.ThinkPHP文件夹是核心文件夹,里面东西不要修改,可以查看,比如 ...