编程 Javascript

SpringMVC简单整合Angular2的示例

Posted in Javascript onJuly 31, 2017

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

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

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

SpringMVC简单整合Angular2的示例

spring配置文件设置路径

SpringMVC简单整合Angular2的示例

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

SpringMVC简单整合Angular2的示例

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

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

SpringMVC简单整合Angular2的示例

这样项目就可以运行了

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

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

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

SpringMVC简单整合Angular2的示例

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

SpringMVC简单整合Angular2的示例

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

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

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

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

SpringMVC简单整合Angular2的示例

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

SpringMVC简单整合Angular2的示例

- Author -

EvolutionJJ

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript五图轮播切换实用版

Aug 17 Javascript

从数据结构分析看：用for each...in 比 for...in 要快些

Apr 17 Javascript

jquery实现的网页自动播放声音

Apr 30 Javascript

jquery css 设置table的奇偶行背景色示例

Jun 03 Javascript

js中通过父级进行查找定位元素

Jun 15 Javascript

使用JavaScript+canvas实现图片裁剪

Jan 30 Javascript

js完美解决IE6不支持position:fixed的bug

Apr 24 Javascript

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

Jul 07 Javascript

JQuery 设置checkbox值二次无效的解决方法

Jul 22 Javascript

谈谈对JavaScript原生拖放的深入理解

Sep 20 Javascript

vue-cli 如何打包上线的方法示例

May 08 Javascript

vuex入门最详细整理

Mar 04 Javascript

vue.js声明式渲染和条件与循环基础知识

Jul 31 #Javascript

在ABP框架中使用BootstrapTable组件的方法

Jul 31 #Javascript

knockoutjs模板实现树形结构列表

Jul 31 #Javascript

本地存储localStorage用法详解

Jul 31 #Javascript

Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

Jul 31 #Javascript

ES6新特性：使用export和import实现模块化详解

Jul 31 #Javascript

node koa2实现上传图片并且同步上传到七牛云存储

Jul 31 #Javascript

You might like

php桌面中心(四) 数据显示

2007/03/11 PHP

php cli 方式在crotab中运行解决

2010/02/08 PHP

coreseek 搜索英文的问题详解

2013/06/08 PHP

PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)

2016/09/11 PHP

使用PHPMailer发送邮件实例

2017/02/15 PHP

jquery异步请求实例代码

2011/06/21 Javascript

JS 精确统计网站访问量的实例代码

2013/07/05 Javascript

js如何判断不同系统的浏览器类型

2013/10/28 Javascript

JavaScript中Function详解

2015/02/27 Javascript

JavaScript检测浏览器cookie是否已经启动的方法

2015/02/27 Javascript

C#中使用迭代器处理等待任务

2015/07/13 Javascript

由浅入深讲解Javascript继承机制与simple-inheritance源码分析

2015/12/13 Javascript

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

2016/06/02 Javascript

js实现横向拖拽导航条功能

2017/02/17 Javascript

js下载文件并修改文件名

2017/05/08 Javascript

详解wow.js中各种特效对应的类名

2017/09/13 Javascript

jQuery实现基本隐藏与显示效果的方法详解

2018/09/05 jQuery

微信小程序使用npm支持踩坑

2018/11/07 Javascript

微信小程序swiper使用网络图片不显示问题解决

2019/12/13 Javascript

在Echarts图中给坐标轴加一个标识线markLine

2020/07/20 Javascript

Python面向对象编程之继承与多态详解

2018/01/16 Python

Python+PyQT5的子线程更新UI界面的实例

2019/06/14 Python

python自动循环定时开关机（非重启）测试

2019/08/26 Python

python xlwt如何设置单元格的自定义背景颜色

2019/09/03 Python

详解python中的异常和文件读写

2021/01/03 Python

PyCharm常用配置和常用插件(小结)

2021/02/06 Python

日本运动品牌美津浓官方购物网站：MIZUNO SHOP

2016/08/21 全球购物

小学优秀班主任事迹材料

2014/05/17 职场文书

党员领导干部承诺书

2014/05/28 职场文书

工商局所长四风自我剖析及整改措施

2014/10/26 职场文书

爱护环境卫生倡议书

2015/04/29 职场文书

2016元旦文艺汇演主持词（开场白+结束语）

2015/12/03 职场文书

家长必看：义务教育，不得以面试评测等名义选拔学生

2019/07/09 职场文书

创业的9条正确思考方式

2019/08/26 职场文书

简述python四种分词工具,盘点哪个更好用?

2021/04/13 Python

Python制作动态字符画的源码

2021/08/04 Python