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

显示、隐藏密码

Jul 01 Javascript

js加密解密字符串可自定义密码因子

May 13 Javascript

用js闭包的方法实现多点标注冒泡示例

May 29 Javascript

jquery根据属性和index来查找属性值并操作

Jul 25 Javascript

Javascript数组Array基础介绍

Mar 13 Javascript

浅谈Sticky组件的改进实现

Mar 22 Javascript

jqGrid 学习笔记整理——进阶篇(一 )

Apr 17 Javascript

简单实现JavaScript弹幕效果

Aug 27 Javascript

将angular.js项目整合到.net mvc中的方法详解

Jun 29 Javascript

jquery 给动态生成的标签绑定事件的几种方法总结

Feb 24 jQuery

微信小程序实现录制、试听、上传音频功能（带波形图）

Feb 27 Javascript

如何用JavaScript检测当前浏览器是无头浏览器

Apr 27 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

实用函数2

2007/11/08 PHP

php error_log 函数的使用

2009/04/13 PHP

Mac下快速搭建PHP开发环境步骤详解

2019/05/05 PHP

再谈Yii Framework框架中的事件event原理与应用

2020/04/07 PHP

Javascript - HTML的request类

2006/07/15 Javascript

28个JS验证函数收集

2010/03/02 Javascript

UserData用法总结 lanyu出品

2010/07/01 Javascript

两个listbox实现选项的添加删除和搜索

2013/03/01 Javascript

Javascript添加监听与删除监听用法详解

2014/12/19 Javascript

JS实现表格数据各种搜索功能的方法

2015/03/03 Javascript

Backbone.js框架中简单的View视图编写学习笔记

2016/02/14 Javascript

JavaScript的ExtJS框架中表格的编写教程

2016/05/21 Javascript

谈谈JavaScript的New关键字

2016/08/26 Javascript

Bootstrap框架的学习教程详解(二)

2016/10/18 Javascript

JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解

2016/11/29 Javascript

浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

2017/02/19 Javascript

Javascript快速实现浏览器系统通知

2017/08/26 Javascript

React Native使用Modal自定义分享界面的示例代码

2017/10/31 Javascript

详解Angular中通过$location获取地址栏的参数

2018/08/02 Javascript

Vue2.x中利用@font-size引入字体图标报错的解决方法

2018/09/28 Javascript

vue实现移动端轻量日期组件不依赖第三方库的方法

2019/04/28 Javascript

微信小程序如何播放腾讯视频的实现

2019/09/20 Javascript

Vue学习之组件用法实例详解

2020/01/06 Javascript

[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访

2014/06/30 DOTA

跟老齐学Python之坑爹的字符编码

2014/09/28 Python

python实现字符串和日期相互转换的方法

2015/05/13 Python

numpy.delete删除一列或多列的方法

2018/04/03 Python

Pandas Shift函数的基础入门学习笔记

2018/11/16 Python

浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器

2019/03/11 Python

英国家喻户晓的高街品牌：River Island

2017/11/28 全球购物

期末自我鉴定

2014/02/02 职场文书

应届生求职自荐信范文

2014/04/07 职场文书

银行职员工作失误检讨书

2014/10/14 职场文书

五一晚会主持词

2015/07/01 职场文书

PyTorch梯度裁剪避免训练loss nan的操作

2021/05/24 Python

海贼王十大潜力果实，路飞仅排第十，第一可毁世界(震震果实)

2022/03/18 日漫