编程 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下的几个你可能没用过的功能

Aug 29 Javascript

jQuery 插件仿百度搜索框智能提示(带Value值)

Jan 22 Javascript

JavaScript实现当网页加载完成后执行指定函数的方法

Mar 21 Javascript

基于javascript实现根据身份证号码识别性别和年龄

Jan 22 Javascript

Vue.js事件处理器与表单控件绑定详解

Mar 20 Javascript

JS实现动态添加外部js、css到head标签的方法

Jun 05 Javascript

基于layui table返回的值的多级嵌套的解决方法

Sep 19 Javascript

Vue实现页面添加水印功能

Nov 09 Javascript

vue-cli3.0实现一个多页面应用的历奇经历记录总结

Mar 16 Javascript

js判断密码强度的方法

Mar 18 Javascript

Vue点击切换Class变化,实现Active当前样式操作

Jul 17 Javascript

vue生命周期钩子函数以及触发时机

Apr 26 Vue.js

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用正则表达式匹配中文实例详解

2013/11/06 PHP

php实现阳历阴历互转的方法

2015/10/28 PHP

PHP封装的字符串加密解密函数

2015/12/18 PHP

php mysql 封装类实例代码

2016/09/18 PHP

laravel 实现向公共模板中传值 (view composer)

2019/10/22 PHP

Laravel5.1 框架控制器基础用法实例分析

2020/01/04 PHP

phpmyadmin在宝塔面板里进不去的解决方案

2020/07/06 PHP

分享一个asp.net pager分页控件

2012/01/04 Javascript

瀑布流布局并自动加载实现代码

2013/03/12 Javascript

原生js编写设为首页兼容ie、火狐和谷歌

2014/06/05 Javascript

在JS数组特定索引处指定位置插入元素

2014/07/27 Javascript

JavaScript代码应该放在HTML代码哪个位置比较好？

2014/10/16 Javascript

js实现鼠标经过表格行变色的方法

2015/05/12 Javascript

推荐10 个很棒的 jQuery 特效代码

2015/10/04 Javascript

Jquery ajax请求导出Excel表格的实现代码

2016/06/08 Javascript

JavaScript高仿支付宝倒计时页面及代码实现

2016/10/21 Javascript

jQuery使用DataTable实现删除数据后重新加载功能

2017/02/27 Javascript

微信小程序出现47001 data format error原因解决办法

2017/03/10 Javascript

微信小程序页面跳转及数据传递详解

2017/03/14 Javascript

Vue2.0 axios前后端登陆拦截器(实例讲解)

2017/10/27 Javascript

Vue全局loading及错误提示的思路与实现

2019/08/09 Javascript

no-vnc和node.js实现web远程桌面的完整步骤

2019/08/11 Javascript

react quill中图片上传由默认转成base64改成上传到服务器的方法

2019/10/30 Javascript

浅谈vue 多个变量同时赋相同值互相影响

2020/08/05 Javascript

[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18

2018/08/19 DOTA

python 判断文件还是文件夹的简单实例

2019/06/10 Python

选择python进行数据分析的理由和优势

2019/06/25 Python

基于django micro搭建网站实现加水印功能

2020/05/22 Python

python中append函数用法讲解

2020/12/11 Python

利用Opencv实现图片的油画特效实例

2021/02/28 Python

高三语文教学反思

2014/01/15 职场文书

最新创业融资计划书

2014/01/19 职场文书

知名企业招聘广告词大全

2014/03/18 职场文书

学校交通安全责任书

2014/08/25 职场文书

2014年法制宣传日活动方案

2014/11/02 职场文书

乡镇一岗双责责任书

2015/01/29 职场文书