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

jQuery 选择器项目实例分析及实现代码

Dec 28 Javascript

动态创建script在IE中缓存js文件时导致编码的解决方法

May 04 Javascript

JavaScript获取路径设计源码

May 22 Javascript

jquery中map函数与each函数的区别实例介绍

Jun 23 Javascript

2014 HTML5/CSS3热门动画特效TOP10

Dec 07 Javascript

js+ajax实现获取文件大小的方法

Dec 08 Javascript

javascript实现表单验证

Jan 29 Javascript

利用jQuery的动画函数animate实现豌豆发射效果

Aug 28 Javascript

JSON与String互转的实现方法(Javascript)

Sep 27 Javascript

Ajax与服务器（JSON）通信实例代码

Nov 05 Javascript

jquery自定义显示消息数量

Dec 19 jQuery

深入了解js原型模式

May 30 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 autoload机制的详解

2013/06/09 PHP

基于PHPexecl类生成复杂的报表表头示例

2016/10/14 PHP

PHP levenshtein()函数用法讲解

2019/03/08 PHP

Laravel实现搜索的时候分页并携带参数

2019/10/15 PHP

laravel清除视图缓存的代码

2019/10/23 PHP

js内置对象学习笔记

2011/08/01 Javascript

减少访问DOM的次数提升javascript性能

2014/02/24 Javascript

javascript动态判断html元素并执行不同的操作

2014/06/16 Javascript

jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

2015/08/22 Javascript

javascript中的正则表达式使用详解

2015/08/30 Javascript

详解JavaScript函数对象

2015/11/15 Javascript

jQuery简单实现上下,左右滑动的方法

2016/06/01 Javascript

浅谈javascript中的加减时间

2016/07/12 Javascript

vue+vuex+axios+echarts画一个动态更新的中国地图的方法

2017/12/19 Javascript

详解vue填坑之解决部分浏览器不支持pushState方法

2018/07/12 Javascript

React Hooks的深入理解与使用

2018/11/12 Javascript

Vue从TodoList中学父子组件通信

2019/02/05 Javascript

可用于监控 mysql Master Slave 状态的python代码

2013/02/10 Python

python基于urllib实现按照百度音乐分类下载mp3的方法

2015/05/25 Python

Python引用传值概念与用法实例小结

2017/10/07 Python

Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法

2018/02/03 Python

selenium + python 获取table数据的示例讲解

2018/10/13 Python

Python运维开发之psutil库的使用详解

2018/10/18 Python

Python进程间通信Queue消息队列用法分析

2019/05/22 Python

python通过实例讲解反射机制

2019/10/17 Python

Python3如何使用tabulate打印数据

2020/09/25 Python

python爬虫中url管理器去重操作实例

2020/11/30 Python

python利用proxybroker构建爬虫免费IP代理池的实现

2021/02/21 Python

Html5新标签解释及用法

2012/02/17 HTML / CSS

ABOUT YOU匈牙利：500个最受欢迎的时尚品牌

2019/07/19 全球购物

美国家居装饰店：Z Gallerie

2020/12/28 全球购物

最受欢迎的自我评价

2013/12/22 职场文书

幼儿园家长会欢迎词

2014/01/09 职场文书

我们的节日重阳节活动总结

2015/03/24 职场文书

2015年团支书工作总结

2015/04/03 职场文书

个人落户申请书怎么写?

2019/06/28 职场文书