编程 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 相关文章推荐

window.location和document.location的区别分析

Dec 23 Javascript

jQuery $.extend()用法总结

Jun 15 Javascript

随鼠标移动的时钟非常漂亮遗憾的是只支持IE

Aug 12 Javascript

浅谈$_FILES数组为空的原因

Feb 16 Javascript

使用ef6创建oracle数据库的实体模型遇到的问题及解决方案

Nov 09 Javascript

JS随机数产生代码分享

Feb 24 Javascript

Vue2.0子同级组件之间数据交互方法

Feb 28 Javascript

JS遍历DOM文档树的方法实例详解

Apr 03 Javascript

Vuex中的State使用介绍

Jan 19 Javascript

js神秘的电报密码哈弗曼编码实现

Sep 10 Javascript

基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

Nov 12 Javascript

vue实现图片裁剪后上传

Dec 16 Vue.js

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通用分页类page.php[仿google分页]

2008/08/31 PHP

PHP实现多进程并行操作的详解(可做守护进程)

2013/06/18 PHP

php 微信开发获取用户信息如何实现

2016/12/13 PHP

jQuery :nth-child前有无空格的区别分析

2011/07/11 Javascript

js opener的使用详解

2014/01/11 Javascript

Jquery实现由下向上展开效果的例子

2014/12/08 Javascript

JQuery复制DOM节点的方法

2015/06/11 Javascript

纯js代码实现简单计算器

2015/12/02 Javascript

浅谈时钟的生成(js手写简洁代码)

2016/08/20 Javascript

JS使用正则截取两个字符串之间的字符串实现方法详解

2017/01/06 Javascript

jQuery实现ajax无刷新分页页码控件

2017/02/28 Javascript

基于React实现表单数据的添加和删除详解

2017/03/14 Javascript

js a标签点击事件

2017/03/30 Javascript

微信小程序获取session_key和openid的实例

2017/08/17 Javascript

JS+Canvas绘制动态时钟效果

2017/11/10 Javascript

网页爬虫之cookie自动获取及过期自动更新的实现方法

2018/03/06 Javascript

JS 使用 window对象的print方法实现分页打印功能

2018/05/16 Javascript

微信小程序3D轮播实现代码

2019/09/19 Javascript

浅析微信小程序modal弹窗关闭默认会执行cancel问题

2019/10/14 Javascript

React实现评论的添加和删除

2020/10/20 Javascript

由浅入深讲解python中的yield与generator

2017/04/05 Python

Python中一行和多行import模块问题

2018/04/01 Python

python实现AES加密和解密

2019/03/27 Python

mac系统下Redis安装和使用步骤详解

2019/07/09 Python

正则给header的冒号两边参数添加单引号（Python请求用）

2019/08/09 Python

会走动的图形html5时钟示例

2014/04/27 HTML / CSS

Harrods美国：英国最大的百货公司

2018/11/04 全球购物

生物制药专业求职信

2014/03/11 职场文书

销售提升方案

2014/06/07 职场文书

小学美术兴趣小组活动总结

2014/07/07 职场文书

培训师岗位职责

2015/02/14 职场文书

2015年销售工作总结范文

2015/03/30 职场文书

小学科学课教学反思

2016/02/23 职场文书

2016年社区六一儿童节活动总结

2016/04/06 职场文书

2019年怎样写好导游词？

2019/07/02 职场文书

使用feign服务调用添加Header参数

2021/06/23 Java/Android