编程 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 通用简单的table选项卡实现

May 07 Javascript

jQuery UI Dialog控件中的表单无法正常提交的解决方法

Dec 19 Javascript

解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

Jan 11 Javascript

JavaScript中读取和保存文件实例

May 08 Javascript

在页面中输出当前客户端时间javascript实例代码

Mar 02 Javascript

js控住DOM实现发布微博效果

Aug 30 Javascript

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

Jan 05 Javascript

jQuery实现html table行Tr的复制、删除、计算功能

Jul 10 jQuery

浅谈Angular 观察者模式理解

Nov 01 Javascript

微信小程序自定义导航教程（兼容各种手机）

Dec 12 Javascript

js实现简单的秒表

Jan 16 Javascript

Vue Router 实现动态路由和常见问题及解决方法

Mar 06 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基于进程控制函数实现多线程

2020/12/09 PHP

swoole锁的机制代码实例讲解

2021/03/04 PHP

Javascript注入技巧

2007/06/22 Javascript

JavaScript中创建对象和继承示例解读

2014/02/12 Javascript

Javascript排序算法之合并排序（归并排序）的2个例子

2014/04/04 Javascript

jQuery中triggerHandler()方法用法实例

2015/01/19 Javascript

JQuery中attr方法和removeAttr方法用法实例

2015/05/18 Javascript

JavaScript实现Java中Map容器的方法

2016/10/09 Javascript

微信小程序之GET请求的实例详解

2017/09/29 Javascript

JS计算距当前时间的时间差实例

2017/12/29 Javascript

详解ajax的data参数错误导致页面崩溃

2018/04/30 Javascript

JS实现调用本地摄像头功能示例

2018/05/18 Javascript

vue左右侧联动滚动的实现代码

2018/06/06 Javascript

Vue-router的使用和出现空白页,路由对象属性详解

2018/09/03 Javascript

详解小程序循环require之坑

2019/03/08 Javascript

vue 列表页跳转详情页获取id以及详情页通过id获取数据

2019/03/27 Javascript

Openlayers绘制聚合标注

2020/09/28 Javascript

浅谈Vue static 静态资源路径和 style问题

2020/11/07 Javascript

[05:26]TI10典藏宝瓶套装外观展示

2020/07/03 DOTA

python编码最佳实践之总结

2016/02/14 Python

Python cookbook(数据结构与算法)对切片命名清除索引的方法

2018/03/13 Python

Python 中的Selenium异常处理实例代码

2018/05/03 Python

django进阶之cookie和session的使用示例

2018/08/17 Python

pandas计算最大连续间隔的方法

2019/07/04 Python

Python实现汇率转换操作

2020/05/03 Python

详解python如何引用包package

2020/06/07 Python

如何在C# winform中异步调用web services

2015/09/21 面试题

Linux如何压缩可执行文件

2013/10/21 面试题

《生命的药方》教学反思

2014/04/08 职场文书

《开国大典》教学反思

2014/04/19 职场文书

技术岗位竞聘演讲稿

2014/05/16 职场文书

社区志愿者活动方案

2014/08/18 职场文书

湖南省召开党的群众路线教育实践活动总结大会报告

2014/10/21 职场文书

2015年学生会个人工作总结

2015/04/09 职场文书

2015年法律事务部工作总结

2015/07/27 职场文书

中小学教师继续教育心得体会

2016/01/19 职场文书