Angular项目从新建、打包到nginx部署全过程记录
前言
当前，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 serve 或 npm 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即可。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
今天小编就为大家分享一篇angular5 子组件监听父组件传入值的变化方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义。下面通过本文给大家介绍Angular2 组件交互知识，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了Angular事件之不同组件间传递数据的方法，利用Angular Event在不同组件之间传递数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了AngularJS中的拦截器实例详解的相关资料,需要的朋友可以参考下2017-04-04
使用Angular开发需要非常多的前置知识,比如TypeScript、RxJS等,所以学习成本比较高,下面这篇文章主要给大家关于Angular开发内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章运用实例代码给大家介绍了angularjs中过滤器的使用和自定义过滤器，对大家学习AngularJS具有一定的参考借鉴价值，感兴趣的朋友们可以参考借鉴。2016-09-09
本文主要介绍AngularJS 路由与多视图详解，这里整理了相关资料及示例代码，详细说明了在开发过程中如何应用，有兴趣的朋友可以看下2016-08-08
这篇文章主要给大家介绍了在Angular2下使用pdf插件的方法，使用这个插件是要实现一个pdf显示的功能，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要介绍了cnpm加速Angular项目创建的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Angular.js之作用域scope''@'',''='',''&''实例详解
这篇文章主要介绍了Angular.js之作用域scope'@','=','&'实例详解,需要的朋友可以参考下2017-02-02
最新评论