SpringBoot与Angular2的集成

骞讳护发布于2019-08-15 14:26 / 3494人阅读

摘要：背景以为启动的框架，以为前端页面的框架，最后需要将的代码运行在内置中。最终生成的包中也会包含这些内容。本地启动项目测试如果继续使用的启动方式函数运行，由于中并没有的代码，则不会正确看到页面。解决办法就是使用另一个插件，专门用于的命令。

背景

以springboot为tomcat启动的框架，以angular2为前端页面的框架，最后需要将angular2的代码运行在springboot内置tomcat中。

项目结构

src/main/
--------angular
--------java
--------resources
pom.xml

angular目录是用的angular cli创建的新项目，java中是springboot的启动代码，resources目录下只有application.yml配置文件

集成思路

由于springboot的工程中要加入静态html文件等需要放在resources下面的static目录下，然后直接通过localhost:8080/index.html即可访问static目录下的index.html文件。所以我们需要将angular的编译代码放在该static目录中。

于是，集成的步骤：

编译angular的项目，使用npm run release命令即可，编译后的代码在angular/dist目录中

复制angular/dist目录中的所有文件到resources/dist目录下（是springboot编译后的jar包目录），或者将angular/dist目录作为resource资源

我们可以通过maven的一些插件来完成，这里将用到exec-maven-plugin插件（用于执行命令）。

pom.xml中的build

在项目的pom.xml文件中，我们需要添加build配置：

将/src/main/angular/dist目录作为resource目录

build的时候执行npm run release命令

 
    
      
        src/main/resources
      
      
        ${project.basedir}/src/main/angular/dist
        static
      
    
    
      
      
        org.codehaus.mojo
        exec-maven-plugin
        1.6.0
        
          
            generate-sources
            
              exec
            
          
        
        
          npm
          src/main/angular
          
            run
            release

然后执行mvn clean package后，在target/classes目录下的就会看到static目录以及angular/dist目录中的所有文件。最终生成的jar包中也会包含这些内容。

本地启动项目测试

如果继续使用sptringboot的启动方式Application.main函数运行，由于resources中并没有angular/dist的代码，则不会正确看到页面。解决办法就是使用另一个maven插件：spring-boot-maven-plugin，专门用于springboot的maven命令。

在pom.xml中的build>plugins中加入以下代码即可：

      
        org.springframework.boot
        spring-boot-maven-plugin
        1.5.9.RELEASE
        
          
            
              repackage

然后执行maven的run命令： mvn clean spring-boot:run即可启动该项目，并且会加载angular的编译文件。

云服务器 GPU云服务器数据仓库与数据集成 angular2 angular2JS SpringBoot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/68606.html

ANGULAR2 与 D3.js集成实现自定义可视化

摘要：目标展现层与逻辑层分离数据与可视化组件相分离数据与视图双向绑定实时更新代码结构清晰易于维护与修改基本原理的组件生命周期钩子方法父子组件交互机制模板语法源码解析代码结构很简单，其中除主页和之外的代码结构如下所示实现宿主视图定义，个按钮，按钮目标展现层与逻辑层分离数据与可视化组件相分离数据与视图双向绑定,实时更新代码结构清晰,易于维护与修改基本原理 angular2 的组件...

wangbjun 2019-08-26 11:48 评论0 收藏0
Angular2， NativeScript 和 React Native比较[翻译]

摘要：当开始使用来提供真正的跨平台应用时，他发现对的紧耦合的依赖性在用开发应用创建映射时呈现的问题。的重点放在高性能的渲染和执行上，你可以很轻松的创建高性能的跨平台应用，这些应用可以在相同的代码库上运行并且随意使用特点平台的组件。 showImg(https://segmentfault.com/img/bVJi8d?w=980&h=400); 在开发阶段，跨平台开发App面临一个很重要的决...

cooxer 2019-08-20 14:19 评论0 收藏0
SpreadJS 纯前端表格控件推出新版本，正式支持Angular 2

摘要：数百万前端开发人员翘首期待的，日前宣布版本正式发布，全面支持是一款纯前端表格控件，也是目前市面上唯一的最接近的纯前端控件。葡萄城公司成立于年，是全球领先的集开发工具商业智能解决方案管理系统设计工具于一身的软件和服务提供商。数百万前端开发人员翘首期待的SpreadJS，日前宣布V10.2版本正式发布，全面支持Angular2！ SpreadJS 是一款纯前端表格控件，也是目前市面上唯一...

hizengzeng 2019-08-20 18:28 评论0 收藏0
SpringBoot 1024行代码 - 集成Logback

前言 SpringBoot是一个全家桶，可以方便的集成各种开发工具。日志框架是一个在线应用必需的，本文介绍了当前主流日志框架Logback与SpringBoot的集成方法准备工作完成SpringBoot 1024行代码 - Getting Started（一个简单的web应用）具体步骤 1. 添加Logback的配置文件logback-springboot.xml 其中文件名需要为logba...

dailybird 2019-08-15 12:28 评论0 收藏0