Angular项目从新建、打包到nginx部署全过程记录


Posted in Javascript onDecember 09, 2017

前言

当前,AngularJS作为Javascript的MVC(也有人说是MV*,暂且不纠结这个)框架被广泛使用,它为更快且更容易地开发响应式的Web提供了强大的机制。作为MVC框架,它将Web前端代码分成三个组件Model,View和Controller。因此,在data model,应用逻辑(Controllers)和view展示之间有明确的分离,让你更容易地关注关键的开发区域。view接收来自model的数据来展示。当用户通过点击或者敲击键盘和应用交互时,controller通过改变模型中的数据进行响应。最终,view得到了发生在model中的变化这个通知,从而它能更新展示的内容。

最近我在给一个不懂计算机的朋友做一个小的应用程序,我想用Angular来做。一般我们在IDE上开发的时候都会用npm start或者ng serve来启动一个内部服务器,可是如果我把开发好的程序给朋友,怎么才能让他能够在自己的浏览器中打开呢?我这里选择了nginx服务器来部署我的程序。

一、新建Angular程序

1.安装nodejs

2.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装angular cli

npm install -g @angular/cli

4.新建项目

ng new myProj

5.安装依赖包

在有package.json的目录下cnpm install

6.IDE中运行

ng servenpm install, 在localhost:4200中查看

二、打包

ng build,会在项目文件夹下生成dist文件,里面是打包后的文件。

三、部署

在nginx官网中下载nginx

把dist文件夹下的打包文件拷贝到nginx/html下并重命名为myProj

修改conf/nginx.conf文件
location / {
   root html/myProj;
   index index.html index.htm;
  }

点击nginx.exe启动nginx

在浏览器中输入localhost:80即可看到项目

这个时候,我们只需要把nginx打包发给朋友,然后告诉他点击nginx.exe后,在浏览器中输入localhost:80即可。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vue实现表格合并功能
Dec 01 Vue.js
利用ES6实现单例模式及其应用详解
Dec 09 #Javascript
利用node.js如何创建子进程详解
Dec 09 #Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 #Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 #Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 #Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 #Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 #Javascript
You might like
教你如何使用php session
2013/10/28 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python常用的json标准库
2019/02/19 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python中append函数用法讲解
2020/12/11 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
Python实现区域填充的示例代码
2021/02/03 Python
What is view? why do we have view?
2012/06/22 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
计算机专业个人简短的自我评价
2013/10/23 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
幼儿园个人总结
2015/02/28 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
美元符号 $
2022/02/17 杂记
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技