假设

　　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. 一类 O(1) 算法的总结

    这里要注意一下, 一部分 O(1) 算法是需要 \(O(n)\) 或者 \(O(\sqrt n)\) 预处理的... 1. O(1) 求 1~n 的异或和: inline int calc(R int ...

  2. 使用selesium和pytesseract识别验证码，达到登录网页目的

    关于验证码问题,大多可以在网上了解到目前有四种解决方案:1.开发注释验证码2.开发开一个“后门”,设置一个万能码,输入万能码则通过3.通过cookies绕过验证码4.图形识别技术 前三种是比较快速也是 ...

  3. 找不到javax.servlet.Filter的类文件

    在这里我是用IDEA来开发的,Tomcat用的maven插件 原因:没有相应在jar包 解决:导入相应在jar的依赖,在pom文件中添加 <dependency> <groupId& ...

  4. jmeter（二十二）jmeter测试Java请求

    目的:对Java程序进行测试 目录 一.核心步骤 二.实例 三.JMeter Java Sampler介绍 四.自带Java Request Sampler 一.核心步骤 1.创建一个Java工程: ...

  5. uva 6910 - Cutting Tree 并查集的删边操作，逆序

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  6. word2vec的Java源码【转】

    一.核心代码 word2vec.java package com.ansj.vec; import java.io.*; import java.lang.reflect.Array; import ...

  7. 获取一段HTML文本中的第一张图片与截取内容摘要

    有时候我们获得到的数据是一段HTML文本,也许这段文本里面有许多图片,需要截取一张作为标题图片,这时就可以用到下面这个方法获取到第一张图片: #region 获取第一张图片 /// <summa ...

  8. Git使用简析

    推送本地操作 初始化一个本地Git仓库,在需要添加版本控制的文件夹根目录中使用git init命令. 添加文件到本地Git仓库: git add 文件名 # 添加文件到暂存区 git add . # ...

  9. 【HEVC帧间预测论文】P1.5 Fast Coding Unit Size Selection for HEVC based on Bayesian Decision Rule

    Fast Coding Unit Size Selection for HEVC based on Bayesian Decision Rule <HEVC标准介绍.HEVC帧间预测论文笔记&g ...

  10. Selenium私房菜系列3 -- Selenium API参考手册【ZZ】

    大家在编写测试案例想查阅Selenium API说明时,可以查阅本文,否则请跳过! (注:这里API版本比较老,新版本的Selenium的API在这里不一定能找到.) Selenium API说明文档 ...