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 ...
随机推荐
- PHP 使用 header 方式实现文件下载功能
header() 函数向客户端发送原始的 HTTP 报头. 下载文件要用的的请求头: header("Content-type:application/octet-stream") ...
- c++ 常用的几种重载操作符
运算符可以作为普通函数,朋友函数或成员函数来重载.下面的经验法则可以帮助您确定哪种形式最适合于给定的情况: 如果你重载了赋值(=),下标([]),函数调用(())或成员选择( - >),那么它就 ...
- PopupWindow(3)back,home 键无法关闭popupwindow的解决方案
private PopupWindow mPopupWindow; //popup window 一般popuowindow 要都个显示view,本例子中view模拟菜单. private View ...
- h5-20-文件操作-拖放文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- java环境变量配置加maven配置
1.安装JDK开发环境 下载网站:http://www.oracle.com/ 确定之后,单击“下一步”. 2.配置环境变量: 单击“计算机-属性-高级系统设置”,单击“环境变量”.在“系统变量”栏下 ...
- AJPFX总结之Socket编程
一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...
- 【转】Java泛型方法
1. 定义泛型方法 (1) 如果你定义了一个泛型(类.接口),那么Java规定,你不能在所有的静态方法.静态初块等所有静态内容中使用泛型的类型参数.例如: public class A<T> ...
- return false 的其中一种用法
return false 的具体是做什么的在这里就不多说了,因为我觉得我形容不明白.....避免大家弄混乱,就不给大家添麻烦了~~ 直接上例子: 1.先看看下面一段代码,指出其中的错误所在: //点击 ...
- 在服务端C#如何利用NPOI构建Excel模板
目前本人接触过两种模板导出的方式:(1)C#利用NPOI接口制作Excel模板,在服务端用数据渲染模板(2)在前端利用前人搭建好的框架,利用office编写xml制作模板,在客户端进行数据的渲染,导出 ...
- ios MD5大小写加密
#import "NSString+change.h" #import <CommonCrypto/CommonDigest.h> @implementation NS ...