SpringMVC简单整合Angular2的示例

本文介绍了SpringMVC简单整合Angular2的示例，分享给大家，具体如下：

angular使用的是官方的快速开始的例子

将文件全部拷贝到springmvc的项目中，拷贝过程中可能出现文件路径太长而失败，那就先对整个文件压缩，然后拷贝压缩过后的文件，然后解压缩即可。目录结构如下，我是拷贝到angular目录下的

spring配置文件设置路径

然后再html页面中如angular官方所示，引入文件

这里面需要对这些文件的路径进行配置

主要是systemjs.config文件中需要修改两个地方

这样项目就可以运行了

但是这样能运行，是因为我们已经把Typescript编译成js文件了，我们不可能每次修改ts文件，然后编译一下，再运行项目，所以我们需要自动编译Typescript为javascript

由于我使用的idea编辑器，有自带的编辑转换工具，所以只需要进行简单的配置即可(前提是本机安装了nodejs与Typescript依赖)

File-》Settings-》Languages&Frameworks-》node.js and NPM  选择本机已经安装的node.js

File-》Settings-》Languages&Frameworks-》TypeScript

typescript version最好选择本机下载的npm的typescript依赖，选择lib文件夹即可

-p web\WEB-INF\angular 这个命令是表示编译制定的目录，若果没有，则搜索项目根路径，由于我们放在angular目录中，所以需要进行设置

做到这一步就可以在编辑器里进行编译了，但是还做不到自动编译

我们热部署到tomcat的步骤，一般都是make，然后打包，然后启动项目，做到自动编译，只需要在make之前，对Typescript进行编译即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JSP 开发之Spring BeanUtils组件使用

    JSP 开发之Spring BeanUtils组件使用 用于演示的javabean import java.util.Date; public class People { private String name; private int age; private Date birth; public People(String name, int age, Date birth) { super(); this.name = name; this.age = age; this.birth =

  • springboot用thymeleaf模板的paginate分页完整代码

    springboot用thymeleaf模板的paginate分页完整代码

    本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正): 先看java部分 pom.xml 加入 <!--支持 Web 应用开发,包含 Tomcat 和 spring-mvc. --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web&l

  • springmvc+maven搭建web项目

    springmvc+maven搭建web项目

    本文实例为大家分享了springmvc maven搭建web项目的具体步骤,供大家参考,具体内容如下 1.创建一个maven project 为spring1 2.进行项目的配置:默认的java 1.5 在properties中选择project facts项目进行配置,反选web之后修改java环境为1.8.修改之后如下图: 3. 配置好的工作目录如下: 4 修改pom.xml文件 增加两个jar包:servlet和spring webmvc pom.xml如下: <!DOCTYPE web-

  • Spring Boot与Docker部署详解

    Spring Boot与Docker部署详解

    本文介绍了Spring Boot与Docker部署,分享给大家,希望对大家有帮助 开启Docker远程访问 首先需要开启docker远程访问功能,以便可以进行远程操作. CentOS 6 修改/etc/default/docker文件,重启后生效(service docker restart). DOCKER_OPTS="-H=unix:///var/run/docker.sock -H=0.0.0.0:2375"  CentOS 7 打开/usr/lib/systemd/system

  • Spring-boot JMS 发送消息慢的解决方法

    Spring-boot JMS 发送消息慢的问题解决 1.在<ActiveMQ 基于zookeeper的主从(levelDB Master/Slave)搭建以及Spring-boot下使用>中,采用以下代码进行JMS消息发送: @Service public class Producer { @Autowired private JmsMessagingTemplate jmsTemplate; public void sendMessage(Destination destination,

  • 使用Spring自定义注解实现任务路由的方法

    在Spring mvc的开发中,我们可以通过RequestMapping来配,当前方法用于处理哪一个URL的请求.同样我们现在有一个需求,有一个任务调度器,可以按照不同的任务类型路由到不同的任务执行器.其本质就是通过外部参数进行一次路由和Spring mvc做的事情类似.简单看了Spring mvc的实现原理之后,决定使用自定义注解的方式来实现以上功能. 自定义TaskHandler注解 @Target({ElementType.TYPE}) @Retention(RetentionPolicy

  • SpringMVC+MyBatis 事务管理（实例）

    SpringMVC+MyBatis 事务管理（实例）

    前言 spring事务管理包含两种情况,编程式事务.声明式事务.而声明式事务又包括基于注解@Transactional和tx+aop的方式.那么本文先分析编程式注解事务和基于注解的声明式事务. 编程式事务管理使用TransactionTemplate或者PlatformTransactionManager.对于编程式事务spring推荐使用TransactionTemplate. 一.编程式事务 spring事务特性 spring中所有的事务策略类都继承自org.springframework.

  • SpringMVC简单整合Angular2的示例

    SpringMVC简单整合Angular2的示例

    本文介绍了SpringMVC简单整合Angular2的示例,分享给大家,具体如下: angular使用的是官方的快速开始的例子 将文件全部拷贝到springmvc的项目中,拷贝过程中可能出现文件路径太长而失败,那就先对整个文件压缩,然后拷贝压缩过后的文件,然后解压缩即可.目录结构如下,我是拷贝到angular目录下的 spring配置文件设置路径 然后再html页面中如angular官方所示,引入文件 这里面需要对这些文件的路径进行配置 主要是systemjs.config文件中需要修改两个地方

  • shiro 与 SpringMVC的整合完美示例

    shiro 与 SpringMVC的整合完美示例

    想要整合Shiro和springmvc,在网上找了很多例子,感觉都有一点复杂.所以就自己写了一个最简单整合项目,记录在这里以备后面查看. 这个例子包含如下三个部分: 1.简单的页面 2.shiro配置 3.springmvc配置 shiro可以直接和spring整合,但是这样需要单独配置spring用于整合shiro,在配置springmvc.配置文件看起来乱七八糟的.所以这里就shiro不采用spring来管理.因此这里的整合类似 shiro + servlet + springmvc.这样配

  • springBoot 与neo4j的简单整合示例

    Neo4j简介 Neo4j是基于java语言实现的世界领先的图形数据库, 是一个高性能的图形存储,具有成熟和强大的数据库所需的所有功能,如友好的查询语言(Cypher)和ACID事务.对于许多应用程序,与关系数据库相比,Neo4j提供了数量级的性能优势.主要应用于图检索和关系计算.其优点在于: 节点没上线(3.0以后去掉了限制) 扩展性很好,支持集群和企业版 数据ETL有丰富的工具支持,自带GUI 良好的WebUI 更加详细的介绍参考:https://neo4j.com/docs/getting

  • Java框架篇：Spring+SpringMVC+hibernate整合开发

    Java框架篇：Spring+SpringMVC+hibernate整合开发

    前言: 最近没什么事做,搭个框架写成博客记录下来,拉通一下之前所学知识. 话不多说,我们直接步入正题. 准备工作: 1/安装并配置java运行环境 2/数据库的安装配置(Mysql) 3/安装并配置服务器(Tomcat) 4/Maven 5/ IntelliJIDEA的安装配置(本人使用的主要软件是IntelliJIDEA,没用eclipse什么的) 6/ 使用IntelliJIDEA创建一个web app项目. 貌似就这些了吧 导包 不同于以往的导包,由于我们创建的是maven的webapp项

  • spring boot整合Swagger2的示例代码

    spring boot整合Swagger2的示例代码

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器端的代码,允许API来始终保持同步.Swagger 让部署管理和使用功能强大的API从未如此简单. 1.代码示例 1).在pom.xml文件中引入Swagger2 <dependency> <groupId>io.springfox</groupId> <artifa

  • Spring+SpringMVC+MyBatis整合详细教程(SSM)

    Spring+SpringMVC+MyBatis整合详细教程(SSM)

    使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合的过程,这次刚刚好基于自己的一个小项目重新搭建了一次,而且比项目搭建的要更好一些.以前解决问题的过程和方法并没有及时记录,以后在自己的小项目中遇到我再整理分享一下.这次,先说说三大框架整合过程.个人认为使用框架并不是很难,关键要理解其思想,这对于我们提高编程水平很有帮助.不过,如果用都不会,谈思想就

  • Spring5+SpringMvc+Hibernate5整合的实现

    在进行环境搭建的时候我发现国内的Spring+SpringMvc+Hibernate整合资料比较少,即使有的话要么就是将所有配置放在一个配置文件,不易于理解结构,要么就是版本太旧,因此这篇文章简单讲解了如何配置相关的开发环境,使用的版本为jdk1.8+spring5+hibernate5 1 分层整合 我们都知道在Spring可以通过<import>标签来将不同的配置文件进行整合的,因此我们就用这个思路来进行整合,我们将全部的配置文件分为dao层,service层和view层,这样整合起来比较

  • Spring Boot 整合 MongoDB的示例

    本节使用SpringBoot 2.1.9.RELEASE,示例源码在https://github.com/laolunsi/spring-boot-examples/tree/master/06-spring-boot-mongo-demo SpringBoot可以非常方便地引入和操作MongoDB.本节分两部分,记录个人学习SpringBoot使用MongoDB数据库的一些知识. 第一部分是一个简单的springboot连接mongo的demo,测试查询功能. 第二部分是基于mongo实现的增

  • SpringBoot整合Redis的示例

    redis是最常用的缓存数据库,常用于存储用户登录token.临时数据.定时相关数据等. redis是单线程的,所以redis的操作是原子性的,这样可以保证不会出现并发问题. redis基于内存,速度非常快,据测试,redis读的速度是110000次/s,写的速度是81000次/s 本节介绍SpringBoot引入redis,以及使用RedisTemplate来操作redis数据. 采用SpringBoot 2.1.9.RELEASE,对应示例代码在:https://github.com/lao

  • SpringBoot整合MongoDB的示例

    本节使用SpringBoot 2.1.9.RELEASE,示例源码在https://github.com/laolunsi/spring-boot-examples/tree/master/06-spring-boot-mongo-demo SpringBoot可以非常方便地引入和操作MongoDB.本节分两部分,记录个人学习SpringBoot使用MongoDB数据库的一些知识. 第一部分是一个简单的springboot连接mongo的demo,测试查询功能. 第二部分是基于mongo实现的增

随机推荐