编程 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函数库-集合框架

Apr 27 Javascript

Javascript 刷新全集常用代码

Nov 22 Javascript

jquery实现奇偶行赋值不同css值

Feb 17 Javascript

JS等比例缩小图片尺寸的实例

Feb 27 Javascript

如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)

Jul 09 Javascript

Javascript页面添加到收藏夹的简单方法

Aug 07 Javascript

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

Dec 16 Javascript

JS定义网页表单提交（submit）的方法

Mar 20 Javascript

webpack下实现动态引入文件方法

Feb 22 Javascript

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

Nov 02 Javascript

Vue登录主页动态背景短视频制作

Sep 21 Javascript

Vue 用Vant实现时间选择器的示例代码

Oct 25 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 PDO数据库操作预处理与注意事项

2019/03/16 PHP

在textarea文本域中显示HTML代码的方法

2007/03/06 Javascript

javascript 网页跳转的方法

2008/12/24 Javascript

var与Javascript变量隐式声明

2009/09/17 Javascript

js隐藏与显示回到顶部按钮及window.onscroll事件应用

2013/01/25 Javascript

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

2013/04/26 Javascript

js网页版计算器的简单实现

2013/07/02 Javascript

JS获取URL中的参数数据

2013/12/05 Javascript

JS delegate与live浅析

2013/12/21 Javascript

transport.js和jquery冲突问题的解决方法

2015/02/10 Javascript

JavaScript DOM 对象深入了解

2016/07/20 Javascript

jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】

2017/03/23 jQuery

node.js的http.createServer过程深入解析

2019/06/06 Javascript

js回调函数原理与用法案例分析

2020/03/04 Javascript

JS函数参数的传递与同名参数实例分析

2020/03/16 Javascript

uni-app微信小程序登录授权的实现

2020/05/22 Javascript

[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2

2014/07/19 DOTA

[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日

2021/03/11 DOTA

python自动化工具日志查询分析脚本代码实现

2013/11/26 Python

Python之Scrapy爬虫框架安装及使用详解

2017/11/16 Python

Python实现的三层BP神经网络算法示例

2018/02/07 Python

Python递归实现汉诺塔算法示例

2018/03/19 Python

Python3 replace()函数使用方法

2018/03/19 Python

jupyter notebook 增加kernel教程

2020/04/10 Python

Django 权限管理(permissions)与用户组(group)详解

2020/11/30 Python

瑞典的玛丽小姐：Miss Mary of Sweden

2019/02/13 全球购物

Under Armour安德玛德国官网：美国高端运动科技品牌

2019/03/09 全球购物

大学生毕业自荐信

2013/10/10 职场文书

面试求职的个人自我评价

2013/11/16 职场文书

学位证书委托书

2014/09/30 职场文书

出国留学英文自荐信

2015/03/25 职场文书

小学运动会加油稿

2015/07/22 职场文书

学生会自荐信

2019/05/16 职场文书

浅谈Redis的几个过期策略

2021/05/27 Redis

业余无线电通联Q语

2022/02/18 无线电