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提示效果(仿腾讯弹出层)
Feb 05 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
利用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应用JSON技巧讲解
2013/02/03 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python多项式回归的实现方法
2019/03/11 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
前台文员岗位职责
2013/12/28 职场文书
工作睡觉检讨书
2014/02/25 职场文书
文明市民先进事迹
2014/05/15 职场文书
教师职位说明书
2014/07/29 职场文书
夏季药店促销方案
2014/08/22 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
邀请函样本
2015/02/02 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
初二物理教学反思
2016/02/19 职场文书
Python集合的基础操作
2021/11/01 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL