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 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
利用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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js获取class的所有元素
2013/03/28 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python中cPickle类使用方法详解
2018/08/27 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python sorted对list和dict排序
2020/06/09 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
电气自动化专业职业规划范文
2014/02/16 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
导游词之井冈山
2019/11/20 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python