假设

　　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程序的更多相关文章

  1. spring boot 集成 zookeeper 搭建微服务架构

    PRC原理 RPC 远程过程调用(Remote Procedure Call) 一般用来实现部署在不同机器上的系统之间的方法调用,使得程序能够像访问本地系统资源一样,通过网络传输去访问远程系统资源,R ...

  2. Spring Boot集成MyBatis开发Web项目

    1.Maven构建Spring Boot 创建Maven Web工程,引入spring-boot-starter-parent依赖 <project xmlns="http://mav ...

  3. Spring Boot集成Hazelcast实现集群与分布式内存缓存

    Hazelcast是Hazelcast公司开源的一款分布式内存数据库产品,提供弹性可扩展.高性能的分布式内存计算.并通过提供诸如Map,Queue,ExecutorService,Lock和JCach ...

  4. Spring boot集成RabbitMQ（山东数漫江湖）

    RabbitMQ简介 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出 ...

  5. Spring boot 集成Dubbox（山东数漫江湖）

    前言 因为工作原因,需要在项目中集成dubbo,所以去查询dubbo相关文档,发现dubbo目前已经不更新了,所以把目光投向了dubbox,dubbox是当当网基于dubbo二次开发的一个项目,dub ...

  6. Spring Boot集成Reactor事件处理框架的简单示例

    1. Reactor简介 Reactor 是 Spring 社区发布的基于事件驱动的异步框架,不仅解耦了程序之间的强调用关系,而且有效提升了系统的多线程并发处理能力. 2. Spring Boot集成 ...

  7. Spring boot 集成Kafka

    搭建Kafka集群,参考: https://www.cnblogs.com/jonban/p/kafka.html 源码示例如下: 1.新建 Maven 项目 kafka 2.pom.xml < ...

  8. 81. Spring Boot集成JSP疑问【从零开始学Spring Boot】

    [原创文章,转载请注明出处] 针对文章: ()Spring Boot 添加JSP支持[从零开始学Spring Boot] 有网友提了这么一些疑问: 1.Spring Boot使用jsp时,仍旧可以打成 ...

  9. Kafka 入门和 Spring Boot 集成

    目录 Kafka 入门和 Spring Boot 集成 标签:博客 概述 应用场景 基本概念 基本结构 和Spring Boot 集成 集成概述 集成环境 kafka 环境搭建 Spring Boot ...

随机推荐

  1. 【Codeforces1139D_CF1139D】Steps to One (Mobius_DP)

    Problem: Codeforces 1139D Analysis: After ACing E, I gave up D and spent the left 30 minutes chattin ...

  2. Zernike矩之图像重建（附源码）

    源码下载 参考: [1] Teague M R. Image analysis via the general theory of moments[J]. JOSA, 1980, 70(8): 920 ...

  3. 把AM_B_ENTRY表里的ARCHIVAL_CODE字段，值复制给BA_ARCHIVAL_CODE_160812字段

    UPDATE AM_B_ENTRY T SET T.BA_ARCHIVAL_CODE_160812=T.ARCHIVAL_CODE SELECT BA_ARCHIVAL_CODE_160812 FRO ...

  4. RHEL 6.5----heartbeat

    主机名 IP  所需软件  master 192.168.30.130  heartbeat.httpd node-1 192.168.30.131  nfs  node-2 192.168.30.1 ...

  5. AJPFX总结OpenJDK 和 HashMap大量数据处理时，避免垃圾回收延迟的技巧二

    HashMap简史 “Hash Code”这个概念第一次出现是在1953年1月的<Computing literature>中,H. P. Luhn  (1896-1964) 在一篇 IB ...

  6. canvas基础绘制-倒计时(上)

    效果: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 教你如何配置WampServer

    httpdconfig 搜索deny 268行 Deny 换成Allow 在本机cmd 搜索 ipconfig 找到 本机的ip 地址 239 行 DocumentRoot "e:/mywe ...

  8. 复位电路设计——利用PLL锁定信号（lock）产生复位信号

    利用PLL锁定信号(lock)产生复位信号 在FPGA刚上电的时候,系统所需的时钟一般都要经过PLL倍频,在时钟锁定(即稳定输出)以前,整个系统应处于复位状态.因此,我们可以利用PLL的锁定信号来产生 ...

  9. html文本溢出显示省略字符的两种常用方法

    方法一:使用CSS溢出省略的方式解决 解决效果如下: css代码: display: -webkit-box; display: -moz-box; white-space: pre-wrap; wo ...

  10. java工作流activiti的步骤

    链接:activiti 表名称的解释 工作流从流程定义到创建一个流程实例完成执行步骤(省略bpmn的画法) 工作流的所有操作都是使用流程引擎来进行操作的,流程引擎只是存储流程的过程,而不存储具体的业务 ...