编程 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实现无刷新更新数据的详细步骤 asp

Dec 26 Javascript

学习ExtJS Column布局

Oct 08 Javascript

Javascript仿PHP $_GET获取URL中的参数

May 12 Javascript

jQuery提示插件alertify使用指南

Apr 21 Javascript

jquery右下角自动弹出可关闭的广告层

May 08 Javascript

JQuery EasyUI的使用

Feb 24 Javascript

js移动端事件基础及常用事件库详解

Aug 15 Javascript

vue监听scroll的坑的解决方法

Sep 07 Javascript

Angular搜索过滤批量删除添加表单验证功能集锦(实例代码)

Oct 25 Javascript

vue观察模式浅析

Sep 25 Javascript

vue悬浮可拖拽悬浮按钮的实例代码

Aug 20 Javascript

Vue数据双向绑定底层实现原理

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

磨咖啡豆的密诀

2021/03/03 冲泡冲煮

建立动态的WML站点(一)

2006/10/09 PHP

php数组对百万数据进行排除重复数据的实现代码

2010/06/08 PHP

PHP实现采集抓取淘宝网单个商品信息

2015/01/08 PHP

php+mysqli预处理技术实现添加、修改及删除多条数据的方法

2015/01/30 PHP

php微信开发之谷歌测距

2018/06/14 PHP

JavaScript触发器详解

2007/03/10 Javascript

js 新浪的一个图片播放图片轮换效果代码

2008/07/15 Javascript

JavaScript中的null和undefined解析

2012/04/14 Javascript

JS 作用域与作用域链详解

2015/04/07 Javascript

JavaScript中for循环的使用详解

2015/06/03 Javascript

基于Jquery实现焦点图淡出淡入效果

2015/11/30 Javascript

JS创建对象的写法示例

2016/11/04 Javascript

bootstrap paginator分页插件的两种使用方式实例详解

2017/11/14 Javascript

jquery图片预览插件实现方法详解

2019/07/18 jQuery

JS中比Switch...Case更优雅的多条件判断写法

2019/09/05 Javascript

extjs图表绘制之条形图实现方法分析

2020/03/06 Javascript

vue设置全局访问接口API地址操作

2020/08/14 Javascript

Python中的两个内置模块介绍

2015/04/05 Python

Python中列表、字典、元组数据结构的简单学习笔记

2016/03/20 Python

Python操作远程服务器 paramiko模块详细介绍

2019/08/07 Python

django与vue的完美结合_实现前后端的分离开发之后在整合的方法

2019/08/12 Python

解决tensorboard多个events文件显示紊乱的问题

2020/02/15 Python

django实现日志按日期分割

2020/05/21 Python

详解tf.device()指定tensorflow运行的GPU或CPU设备实现

2021/02/20 Python

matplotlib阶梯图的实现(step())

2021/03/02 Python

Vision Directa智利眼镜网：框架眼镜、隐形眼镜和名牌太阳眼镜

2016/11/23 全球购物

美国顶级奢侈茶：Mighty Leaf Tea（美泰茶）

2016/11/26 全球购物

法警的竞聘演讲稿

2014/01/02 职场文书

高一生物教学反思

2014/01/17 职场文书

质量保证书范本

2014/04/29 职场文书

大学生学习计划书

2014/09/15 职场文书

二手车转让协议书

2015/01/29 职场文书

西游记读书笔记

2015/06/25 职场文书

毕业典礼致辞

2015/07/29 职场文书

九年级历史教学反思

2016/02/19 职场文书