使用xampp将angular项目运行在web服务器的教程
需求
在开发angular项目时，因为需要做自适配以适应不同的屏幕，而我的电脑只有1366的。所以我现在需要在本地将angular项目运行在xampp上，然后用手机开热点，给本机和另一台大屏电脑或手机连同一wifi，再使用大屏电脑或手机打开本地电脑运行的网站查看适配情况。
安装xampp
下载地址：https://sourceforge.net/projects/xampp/
下载好之后，一路勾选下去就ok了，出现问题请自行百度解决。
开启xampp
如果你是安装好之后进行开启，那么直接在底部栏的任务中找到xampp，点击就能看到如下页面：
因为我们现在不需要用MySQL等东西，所以我们只需要开启Apache即可，如上。
或者如果你是原来就安装好了，现在想打开，那么请在你的xampp安装目录里面找到 “xampp-control.exe”，双击启动，然后如上述内容开启即可。安装目录中的开启文件如下：
配置Angular项目
将index.html中的base href改为如下内容
<!-- <base href="/"> --> <!-- ng build时使用下面这个 --> <base href="./">
给app.moudle.ts文件中添加如下内容
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
...
providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}],
在项目下进行ng build生成包(使用git bash here)
ng build
完成后可以看到项目下多出来一个dist文件，如下：
在xampp下启动web服务
将项目中的dist文件拷贝/剪切到xampp安装目录下的htdocs文件夹下，如下：
至此，就算开启了项目的web服务器，我们可以去浏览器中进行验证
在如上url下，可以看到如下的内容：
点击ng-china，这个就是我的项目，点击进去就可以看到自己写的网站了，图片如下：
从别人电脑下进入网站
使用手机给两台电脑一起开热点，或者链接同一个wifi，这样两个电脑就在同一个局域网下面了。
查看运行网站电脑的ip，注意，因为连的是wifi，此时查看的必须是WLAN的ipv4地址，使用ipconfig查看图片如下：
此时，在别人电脑上输入ip+端口+路径即可查看网站。
http://172.56.192.157:80/dist/ng-china
同理，也可以手机和电脑连同一个wifi，在手机端进行查看页面适配。
相关文章
这篇文章主要介绍了使用AngularJS来实现HTML页面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了angular学习之动态创建表单的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Angular2使用SVG自定义图表（条形图、折线图）组件示例
这篇文章主要介绍了Angular2使用SVG自定义图表（条形图、折线图）组件,涉及Angular结合svg进行图表绘制的相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了AngularJS创建自定义指令的方法,详细的分析了自定义指令的原理、实现步骤、实现方法与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了AngularJS上拉加载问题解决方法的相关资料,该问题在项目中一直存在，小编给大家分享解决办法，需要的朋友可以参考下2016-05-05
这篇文章主要介绍了AngularJS封装指令方法,结合实例形式详细分析了AngularJS的功能、jQuery类库协作及组件封装的具体操作技巧,需要的朋友可以参考下2016-12-12
本文主要介绍AngularJs Forms，这里整理了相关资料及简单示例代码，有需要的朋友可以参考下2016-09-09
这篇文章主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下2017-01-01
Angular 2父子组件数据传递之@Input和@Output详解(下)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了使用Angular CLI生成路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论