假设

　　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. E. Xenia and Tree 分块 + LCA

    http://codeforces.com/contest/342/problem/E 如果把询问1存起来,每到sqrt(m)的时候再处理一次. 那么总复杂度就是msqrt(m)的. 把要变颜色的节点 ...

  2. pageHelper分页插件失效问题

    在bootstrap中引用pageHelper进行页面分页<dependency><groupId>com.github.pagehelper</groupId>& ...

  3. 2. UITest相关APIs

    1. XCUIApplication 这是你正在测试的应用的代理.它能让你启动应用,这样你就能执行测试了.它每次都会新起一个进程,这会多花一些时间,但是能保证测试应用时的状态是干净的,这样你需要处理的 ...

  4. Spring-bean(一)

    配置形式:基于xml文件的方式:基于注解的方式 Bean的配置方式:通过全类名(反射),通过工厂方法(静态工厂方法&实例工厂方法),FactoryBean 依赖注入的方式:属性注入,构造器注入 ...

  5. 基于pymysql模块的增删改查

    上课笔记 重点:(熟练)多表查询创建存储过程原生sql索引原理 pymysql 封装好的客户端cursor 底层就是一个send操作commit 告诉mysql真的要完成修改操作(不然修改不会生效)e ...

  6. 将vue-cli项目配置在nginx上

    登录使用的是node.js搭建的注册登录接口,关于对数据库的读写则是用spring boot的框架来实现的. 1.首先是vue-cli项目里的前端页面的配置: location / { root    ...

  7. 如何正确理解和使用 Activity的4种启动模式

    关于Activity启动模式的文章已经很多,但有的文章写得过于简单,有的则过于注重细节,本文想取一个折中,只关注最重要和最常用的概念,原理和使用方法,便于读者正确应用. Activity的启动模式有4 ...

  8. Git使用简析

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

  9. Ubuntu 16.04 LTS： apt-get update 失败处理 Aborted (core dumped)

    在Ubuntu 16.04运行sudo apt-get update出现如下错误: rogn@ubuntu:~$ sudo apt-get update Get:1 http://us.archive ...

  10. 联玛客（W 笔试）

    纸质算法题 1. 输入数据:1.3.2.4.8... 输出数据:3.1.4.2.8... 找出规律,写出一个程序求解,并附上时间复杂度和空间复杂度 我的答案: 规律一:奇偶位互换 假设输入数据长度为5 ...