angular2+node.js express打包部署的实战


Posted in Javascript onJuly 27, 2017

Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记

angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起。

1、angular2项目创建,使用angular-cli

ng new mypos

2、使用express命令行工具创建express项目。

express --view=hbs

3、angular2 中 需要引用到第三方库 例如 jQuery,bootstrape,

index.html中需要添加应用,然后文件需要拷贝到assets目录

<linkrel="stylesheet"type="text/css"href="/assets/primeng/resources/themes/bootstrap/theme.css" rel="external nofollow" />

<linkrel="stylesheet"type="text/css"href="/assets/primeng/resources/primeng.min.css" rel="external nofollow" />

<linkrel="stylesheet"type="text/css"href="/assets/primeng/resources/font-awesome.min.css" rel="external nofollow" />

<scriptsrc="/assets/jquery.min.js"></script>

<linktype="text/css"href="/assets/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

<scriptsrc="/assets/bootstrap/js/bootstrap.min.js"></script>

4、修改angular-cli.json   //指定为express的静态文件目录。

"outDir":"express/public/"

5、打包

ng build --prod

6、进入express运行目录

npm start

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 #Javascript
Vue2.0如何发布项目实战
Jul 27 #Javascript
在Vue中如何使用Cookie操作实例
Jul 27 #Javascript
vue 怎么创建组件及组件使用方法
Jul 27 #Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
低碳环保口号
2014/06/12 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js