假设

　　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. Raphael.js改变元素层叠顺序

    Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...

  2. Qt样式表之二：QSS语法及常用样式

    一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...

  3. N Queen Again LightOJ - 1061

    N Queen Again LightOJ - 1061 首先预处理(或打表)出所有八皇后的解法(只有92种).然后枚举目标状态,对于每一个目标状态用一个状压dp求出到达那个状态的最小费用.到达任何一 ...

  4. 合理设置apache的连接数及进程工作方式

    网站在线人数增多,访问时很慢.初步认为是服务器资源不足了,但经反复测试,一旦连接上,不断点击同一个页面上不同的链接,都能迅速打开,这种现象就是说明apache最大连接数已经满了,新的访客只能排队等待有 ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. Android 使用GridView+仿微信图片上传功能(附源代码)

    由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下 ...

  7. Python调用Java代码部署及初步使用

    Python调用Java代码部署: jpype下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#jpype 下载的时候需要使用Chrome浏览器进行下载 ...

  8. HTTP协议 处理流程

    我们平时在浏览网页的时候都是使用浏览器,输入你要的网址后回车,就会显示出我们所想要的内容,看似这个简单的用户操作行为的背后,Web的工作原理是怎样的呢?到底隐藏了些什么呢? 对于传统的上网流程,系统它 ...

  9. android开发工具eclipse的安装与配置

    l开发主要应用Eclipse 3.7版本. l辅助工具为jdk.Androidsdk Android环境搭建   –1.1.JDK安装 –1.2.Eclipse安装 –1.3.Android SDK安 ...

  10. 杨辉三角python的最佳实现方式，牛的不能再牛了

    def triangles(): N = [1] while True: yield N N.append(0) N = [N[i-1] + N[i] for i in range(len(N))] ...