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

setInterval与clearInterval的使用示例代码

Jan 28 Javascript

JavaScript中按位“异或”运算符使用介绍

Mar 14 Javascript

javascript实现checkBox的全选，反选与赋值

Mar 12 Javascript

jQuery结合ajax实现动态加载文本内容

May 19 Javascript

js闭包引起的事件注册问题介绍

Mar 29 Javascript

javascript显示系统当前时间代码

Dec 29 Javascript

详解vue组件化开发-vuex状态管理库

Apr 10 Javascript

分分钟学会vue中vuex的应用（入门教程）

Sep 14 Javascript

jQuery简单实现对数组去重及排序操作实例

Oct 31 jQuery

关于vue中watch检测到不到对象属性的变化的解决方法

Feb 08 Javascript

解决在vue项目中,发版之后,背景图片报错,路径不对的问题

Mar 06 Javascript

详解vuex中action何时完成以及如何正确调用dispatch的思考

Jan 21 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中使用Oracle数据库(1)

2006/10/09 PHP

php中10个不同等级压缩优化图片操作示例

2016/11/14 PHP

php读取本地json文件的实例

2018/03/07 PHP

菜单效果

2006/10/14 Javascript

JavaScript 动态改变图片大小

2009/06/11 Javascript

javascript 类定义的4种方法

2009/09/12 Javascript

原来Jquery.load的方法可以一直load下去

2011/03/28 Javascript

在JS中如何调用JSP中的变量

2014/01/22 Javascript

js实现文章文字大小字号功能完整实例

2014/11/01 Javascript

js实现字符串和数组之间相互转换操作

2016/01/12 Javascript

Angular中实现树形结构视图实例代码

2017/05/05 Javascript

Angular.js前台传list数组由后台spring MVC接收数组示例代码

2017/07/31 Javascript

phantomjs导出html到pdf的方法总结

2017/10/19 Javascript

用jquery获取select标签中选中的option值及文本的示例

2018/01/25 jQuery

详解ECMAScript typeof用法

2018/07/25 Javascript

vue-cli 3.x配置跨域代理的实现方法

2019/04/12 Javascript

原生JS实现留言板功能

2020/02/08 Javascript

[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee

2014/05/25 DOTA

python3访问sina首页中文的处理方法

2014/02/24 Python

用Python实现协同过滤的教程

2015/04/08 Python

Python 爬虫图片简单实现

2017/06/01 Python

举例讲解Python常用模块

2019/03/08 Python

python使用mitmproxy抓取浏览器请求的方法

2019/07/02 Python

jupyter notebook更换皮肤主题的实现

2021/01/07 Python

美国女鞋品牌：naturalizer（娜然）

2016/08/01 全球购物

植物选择：Botanic Choice

2017/02/15 全球购物

香港莎莎官网Sasa.com：亚洲著名国际化妆品商城

2019/11/10 全球购物

介绍下Java的输入输出流

2014/01/22 面试题

解释DataSet(ds) 和 ds as DataSet 的含义

2014/07/27 面试题

观看《永远的雷锋》心得体会

2014/03/12 职场文书

大学生简短的自我评价

2014/09/12 职场文书

单位委托书

2014/10/15 职场文书

2014年采购员工作总结

2014/11/18 职场文书

世界水日宣传活动总结

2015/02/09 职场文书

2016高校自主招生自荐信范文

2016/01/28 职场文书

教你使用Pandas直接核算Excel中快递费用

2021/05/12 Python