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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
js图片预加载示例
Apr 30 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
解决await在forEach中不起作用的问题
Feb 25 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python中reload(module)的用法示例详解
2017/09/15 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python实现事件驱动
2018/11/21 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
Shell脚本如何向终端输出信息
2014/04/25 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
公司门卫工作职责
2014/06/28 职场文书
股份合作协议书
2014/09/10 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
学生会个人总结范文
2015/02/15 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
贷款收入证明范本
2015/06/12 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript