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

Node.js 去掉种子(torrent)文件里的邪恶信息

Mar 27 Javascript

Javascript非构造函数的继承

Apr 27 Javascript

JS实现的通用表单验证插件完整实例

Aug 20 Javascript

JavaScript实现复制文章自动添加版权

Aug 02 Javascript

基于Javascript实现的不重复ID的生成器

Dec 25 Javascript

jQuery接受后台传递的List的实例详解

Aug 02 jQuery

javascript编程开发中取色器及封装$函数用法示例

Aug 09 Javascript

jQuery Dom元素操作技巧

Feb 04 jQuery

jQuery操作元素的内容和样式完整实例分析

Jan 10 jQuery

vuex入门最详细整理

Mar 04 Javascript

微信小程序基于高德地图API实现天气组件(动态效果)

Oct 22 Javascript

Vue2.x和Vue3.x的双向绑定原理详解

Nov 05 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

ASP和PHP都是可以删除自身的

2007/04/09 PHP

PHP开发环境配置(MySQL数据库安装图文教程)

2010/04/28 PHP

php开发留言板的CRUD(增，删，改，查)操作

2012/04/19 PHP

php实现的Curl封装类Curl.class.php用法实例分析

2015/09/25 PHP

简单实用的PHP文本缓存类实例

2019/03/22 PHP

有效的捕获JavaScript焦点的方法小结

2009/10/08 Javascript

用js写了一个类似php的print_r输出换行功能

2013/02/18 Javascript

JavaScript的事件绑定(方便不支持js的时候)

2013/10/01 Javascript

jQuery对象和DOM对象之间相互转换的方法介绍

2015/02/28 Javascript

快速掌握Node.js模块封装及使用

2016/03/21 Javascript

xmlplus组件设计系列之路由（ViewStack)（7）

2017/05/02 Javascript

javascript 判断一个对象为数组的方法

2017/05/03 Javascript

bootstrap table合并行数据并居中对齐效果

2018/10/17 Javascript

如何用Node写页面爬虫的工具集

2018/10/26 Javascript

微信小程序公用参数与公用方法用法示例

2019/01/09 Javascript

vue项目前端错误收集之sentry教程详解

2019/05/27 Javascript

微信小程序sessionid不一致问题解决

2019/08/30 Javascript

解决layui 三级联动下拉框更新时回显的问题

2019/09/03 Javascript

layui实现根据table数据判断按钮显示情况的方法

2019/09/26 Javascript

在vue中利用全局路由钩子给url统一添加公共参数的例子

2019/11/01 Javascript

基于Vue全局组件与局部组件的区别说明

2020/08/11 Javascript

[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5

2018/06/06 DOTA

Python 爬虫学习笔记之单线程爬虫

2016/09/21 Python

python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现

2018/06/11 Python

python爬虫库scrapy简单使用实例详解

2020/02/10 Python

Python新手学习函数默认参数设置

2020/06/03 Python

利用python+request通过接口实现人员通行记录上传功能

2021/01/13 Python

JAVA语言如何进行异常处理，关键字：throws,throw,try,catch,finally分别代表什么意义？在try块中可以抛出异常吗？

2013/07/02 面试题

中学生打架检讨书

2014/02/10 职场文书

积极贯彻学习两会精神总结

2014/03/17 职场文书

2016年最美孝心少年事迹材料

2016/02/26 职场文书

小程序教您怎样你零成本推广获取数万用户的方法

2019/07/30 职场文书

MySQL获取所有分类的前N条记录

2021/05/07 MySQL

使用scrapy实现增量式爬取方式

2022/06/21 Python

python数字图像处理实现图像的形变与缩放

2022/06/28 Python

Python中np.random.randint()参数详解及用法实例

2022/09/23 Python