Spring Boot 集成Angular程序
假设
1.你已经完成了Spring Boot的示例，在浏览其中输入http://localhost:8080/index，能够返回html页面。
2.你已经完成了Angular程序，名字为quickstart。比如一个hello angular;（已经编译运行过）
项目资源目录如下：请忽视static下的css、fonts、img、js、只看quickstart文件夹即可。
这里需要注意的是，复制项目时，不要在idea中复制，因为这样你会发现最少一个小时复制不完，我们可以在文件系统中打开相关目录然后复制进去。之后需要点击Build-->Rebuild Project，不然的话，你会发现Spring boot无法访问这些静态资源。
将angular程序的index.html复制到templates下，（我这里改了名称为default，请无视），修改内容如下：
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/static/quickstart/src/app"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="styles.css"/> <!-- Polyfill(s) for older browsers -->
<script src="http://localhost:8080/static/quickstart/node_modules/core-js/client/shim.min.js"></script>
<script src="http://localhost:8080/static/quickstart/node_modules/zone.js/dist/zone.js"></script>
<script src="http://localhost:8080/static/quickstart/node_modules/systemjs/dist/system.src.js"></script>
<!--<script src="https://unpkg.com/core-js/client/shim.min.js"></script>-->
<!--<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>-->
<!--<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>--> <!--This SystemJS configuration loads umd packages from the web -->
<script src="systemjs.config.server.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head> <body>
<my-app>Loading AppComponent hahahahahahahahah content here ...</my-app>
</body>
</html>
说明：1.所有的标签都要有闭合标签，不然会报错;
2.<base >标签的路径需要更改至app下，注意这里最后没有/，
3.引入的文件有两种方式，一种是本地，一种是从网络获取，第二种太慢，已被注释。注意这里的写法，我写的是绝对路径，你们可以试试相对路径。
4.原来的systemjs.config.js替换为systemjs.config.server.js文件，其实第二个文件和第一个文件没啥大区别，就一行不一样，复制一下或者使用原来的都行（都需要修改这一行）：
1 System.config({
2 paths: {
3 // paths serve as alias
4 'npm:': 'http://localhost:8080/static/quickstart/node_modules/'
5 // 'npm:': 'https://unpkg.com/'
6 },
这里，你如果上面使用的是从网络获取，那么你就用第5行的路径，如果你用的是本地的，那么你就用第4行的路径。
这样的话应该就行了。这是最简单的方式，但是没有优化，所以打开页面会比较慢，有空再写。
Spring Boot 集成Angular程序的更多相关文章
- spring boot 集成 zookeeper 搭建微服务架构
PRC原理 RPC 远程过程调用(Remote Procedure Call) 一般用来实现部署在不同机器上的系统之间的方法调用,使得程序能够像访问本地系统资源一样,通过网络传输去访问远程系统资源,R ...
- Spring Boot集成MyBatis开发Web项目
1.Maven构建Spring Boot 创建Maven Web工程,引入spring-boot-starter-parent依赖 <project xmlns="http://mav ...
- Spring Boot集成Hazelcast实现集群与分布式内存缓存
Hazelcast是Hazelcast公司开源的一款分布式内存数据库产品,提供弹性可扩展.高性能的分布式内存计算.并通过提供诸如Map,Queue,ExecutorService,Lock和JCach ...
- Spring boot集成RabbitMQ（山东数漫江湖）
RabbitMQ简介 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出 ...
- Spring boot 集成Dubbox（山东数漫江湖）
前言 因为工作原因,需要在项目中集成dubbo,所以去查询dubbo相关文档,发现dubbo目前已经不更新了,所以把目光投向了dubbox,dubbox是当当网基于dubbo二次开发的一个项目,dub ...
- Spring Boot集成Reactor事件处理框架的简单示例
1. Reactor简介 Reactor 是 Spring 社区发布的基于事件驱动的异步框架,不仅解耦了程序之间的强调用关系,而且有效提升了系统的多线程并发处理能力. 2. Spring Boot集成 ...
- Spring boot 集成Kafka
搭建Kafka集群,参考: https://www.cnblogs.com/jonban/p/kafka.html 源码示例如下: 1.新建 Maven 项目 kafka 2.pom.xml < ...
- 81. Spring Boot集成JSP疑问【从零开始学Spring Boot】
[原创文章,转载请注明出处] 针对文章: ()Spring Boot 添加JSP支持[从零开始学Spring Boot] 有网友提了这么一些疑问: 1.Spring Boot使用jsp时,仍旧可以打成 ...
- Kafka 入门和 Spring Boot 集成
目录 Kafka 入门和 Spring Boot 集成 标签:博客 概述 应用场景 基本概念 基本结构 和Spring Boot 集成 集成概述 集成环境 kafka 环境搭建 Spring Boot ...
随机推荐
- 关于margin和padding取值为百分比和负值的总结
以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...
- iOS 更改通知栏为白色
1.在 info.plist 中添加View controller-based status bar appearance,值为NO. 2.在设置状态栏的地方添加代码: UIApplication.s ...
- Codeforces Round #418 (Div. 2) B
Description Sengoku still remembers the mysterious "colourful meteoroids" she discovered w ...
- Android利用tcpdump抓包，用wireshark分析包。
1.前言 主要介绍在android手机上如何利用tcpdump抓包,用wireshark分析包. android tcpdump官网: http://www.androidtcpdump.com/ t ...
- iOS开发隐藏tabBar的问题
开发中遇到第一个页面需要显示tabBar,但是第二个页面不需要显示,当回到第一个页面的时候又需要显示的情况. 在第一个页面跳转到第二个页面的时候需要给第二个页面设置tabBar的隐藏 - (void) ...
- MySQL GTID复制
什么是GTID 什么是GTID呢, 简而言之,就是全局事务ID(global transaction identifier ),最初由google实现,官方MySQL在5.6才加入该功能.GTID是事 ...
- [转]MVC 检测用户是否已经登录
本文转自:http://blog.csdn.net/jayzai/article/details/41252137 当我们访问某个网站的时候需要检测用户是否已经登录(通过Session是否为null) ...
- 【转】数据库CRUD操作
数据库CRUD操作 一.删除表 drop table 表名称 二.修改表 alter table 表名称 add 列名 数据类型 (add表示添加一列) alter table 表名 ...
- css 尺寸、边框、内边距、背景以及css Sprite
上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...
- IOS之GCD记录
在 GCD 中,加入了两个非常重要的概念: 任务 和 队列. 任务:即操作,你想要干什么,说白了就是一段代码,在 GCD 中就是一个 Block,所以添加任务十分方便.任务有两种执行方式: 同步执行 ...