假设

　　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. iOS Testing with Xcode 阅读笔记

    官方文档直通车 Performance Testing A baseline is a combination of the average time performance in ten runs ...

  2. python之unittest

    unittest是单元测试的一个框架 在说unittest之前,先说几个概念: TestCase 也就是测试用例 TestSuite 多个测试用例集合在一起,就是TestSuite TestLoade ...

  3. Eclipse 运行内存不足情况

    在debug或者run 时 在VM arguments 处添加  -Xms512m -Xmx512m 

  4. oracle 查看未关闭连接

    查看连接状态.问题电脑等信息: select sid,serial#,username,program,machine,status from  v$session; 2.查看sql; select ...

  5. 贴图、纹理、材质的区别是什么？ 还有shader

    贴图.纹理.材质的区别是什么? 还有shader 整个 CG 领域中这三个概念都是差不多的,在一般的实践中,大致上的层级关系是:材质 Material包含贴图 Map,贴图包含纹理 Texture.纹 ...

  6. IOS应用

    下面是这个类的一些功能: 1.设置icon上的数字图标 //设置主界面icon上的数字图标,在2.0中引进, 缺省为0 [UIApplicationsharedApplication].applica ...

  7. like SQL注入与防止 (bin2hex unhex)

    普通的列表模糊查询,可能会被sql注入利用,造成数据泄漏,严重的甚至导致删表删库! 程序中sql语句拼装: $sql = 'student_name like '"%'.$name.'%&q ...

  8. Cognos邮件发送

    1.打开报表,点击下图的标记 2.设置发送格式收件人 3.设置报表格式 4.设置发送内容

  9. Android（java）学习笔记177： 服务（service）之音乐播放器

    1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...

  10. flask 项目部分业务逻辑

    @passport_blu.route('/image_code') def get_image_code(): """ 生成图片验证码并返回 1. 取到参数 2. 判断 ...