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

JS 进度条效果实现代码整理

May 21 Javascript

jQuery AjaxQueue改进步骤

Oct 06 Javascript

javascript中的toFixed固定小数位数简单实例分享

Jul 12 Javascript

15条JavaScript最佳实践小结

Aug 09 Javascript

使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法

Apr 15 Javascript

JavaScript fontsize方法入门实例（按照指定的尺寸来显示字符串）

Oct 17 Javascript

情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)

Aug 21 Javascript

基于JS实现省市联动效果代码分享

Jun 06 Javascript

Node.js下自定义错误类型详解

Oct 17 Javascript

JS实现的3des+base64加密解密算法完整示例

May 18 Javascript

在小程序中使用Echart图表的示例代码

Aug 02 Javascript

React如何解决fetch跨域请求时session失效问题

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

实用函数5

2007/11/08 PHP

php站内搜索关键词变亮的实现方法

2014/12/30 PHP

Yii中实现处理前后台登录的新方法

2015/12/28 PHP

PHP正则获取页面所有图片地址

2016/03/23 PHP

Yii框架表单模型和验证用法

2016/05/20 PHP

Dom 是什么的详细说明

2010/10/25 Javascript

jquery fancybox ie6不显示关闭按钮的解决办法

2013/12/25 Javascript

Javascript表单验证要注意的事项

2014/09/29 Javascript

jquery选择器需要注意的问题

2014/11/26 Javascript

jQuery中animate用法实例分析

2015/03/09 Javascript

jquery实现倒计时效果

2015/12/14 Javascript

BootStrap和jQuery相结合实现可编辑表格

2016/04/21 Javascript

jQuery中借助deferred来请求及判断AJAX加载的实例讲解

2016/05/24 Javascript

Web安全测试之XSS实例讲解

2016/08/15 Javascript

angular2倒计时组件使用详解

2017/01/12 Javascript

使用Node.js实现简易MVC框架的方法

2017/08/07 Javascript

angularjs实现分页和搜索功能

2018/01/03 Javascript

jQuery超简单遮罩层实现方法示例

2018/09/06 jQuery

微信小程序动态显示项目倒计时

2019/06/20 Javascript

在Django框架中运行Python应用全攻略

2015/07/17 Python

Python3编码问题 Unicode utf-8 bytes互转方法

2018/10/26 Python

通过实例了解python property属性

2019/11/01 Python

Python requests.post方法中data与json参数区别详解

2020/04/30 Python

Python之字典对象的几种创建方法

2020/09/30 Python

python re.match()用法相关示例

2021/01/27 Python

跨域修改iframe页面内容详解

2019/10/31 HTML / CSS

Otticanet英国：最顶尖的世界名牌眼镜, 能得到打折季的价格

2019/02/10 全球购物

迪卡侬印尼体育用品商店：Decathlon印尼

2020/03/11 全球购物

意大利网上书店：LaFeltrinelli

2020/06/12 全球购物

德国珠宝和配件商店：Styleserver

2021/02/23 全球购物

家具厂厂长岗位职责

2014/01/01 职场文书

诚实守信演讲稿

2014/09/01 职场文书

会计手工模拟做账心得体会

2016/01/22 职场文书

如何设计高效合理的MySQL查询语句

2021/05/26 MySQL

elasticSearch-api的具体操作步骤讲解

2021/06/28 Java/Android

Nginx源码编译安装过程记录

2021/11/17 Servers