使用xampp將angular項目運行在web服務(wù)器的教程
需求
在開發(fā)angular項目時，因為需要做自適配以適應(yīng)不同的屏幕，而我的電腦只有1366的。所以我現(xiàn)在需要在本地將angular項目運行在xampp上，然后用手機(jī)開熱點，給本機(jī)和另一臺大屏電腦或手機(jī)連同一wifi，再使用大屏電腦或手機(jī)打開本地電腦運行的網(wǎng)站查看適配情況。
安裝xampp
下載地址：https://sourceforge.net/projects/xampp/
下載好之后，一路勾選下去就ok了，出現(xiàn)問題請自行百度解決。
開啟xampp
如果你是安裝好之后進(jìn)行開啟，那么直接在底部欄的任務(wù)中找到xampp，點擊就能看到如下頁面：
因為我們現(xiàn)在不需要用MySQL等東西，所以我們只需要開啟Apache即可，如上。
或者如果你是原來就安裝好了，現(xiàn)在想打開，那么請在你的xampp安裝目錄里面找到 “xampp-control.exe”，雙擊啟動，然后如上述內(nèi)容開啟即可。安裝目錄中的開啟文件如下：
配置Angular項目
將index.html中的base href改為如下內(nèi)容
<!-- <base href="/"> --> <!-- ng build時使用下面這個 --> <base href="./">
給app.moudle.ts文件中添加如下內(nèi)容
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
...
providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}],
在項目下進(jìn)行ng build生成包(使用git bash here)
ng build
完成后可以看到項目下多出來一個dist文件，如下：
在xampp下啟動web服務(wù)
將項目中的dist文件拷貝/剪切到xampp安裝目錄下的htdocs文件夾下，如下：
至此，就算開啟了項目的web服務(wù)器，我們可以去瀏覽器中進(jìn)行驗證
在如上url下，可以看到如下的內(nèi)容：
點擊ng-china，這個就是我的項目，點擊進(jìn)去就可以看到自己寫的網(wǎng)站了，圖片如下：
從別人電腦下進(jìn)入網(wǎng)站
使用手機(jī)給兩臺電腦一起開熱點，或者鏈接同一個wifi，這樣兩個電腦就在同一個局域網(wǎng)下面了。
查看運行網(wǎng)站電腦的ip，注意，因為連的是wifi，此時查看的必須是WLAN的ipv4地址，使用ipconfig查看圖片如下：
此時，在別人電腦上輸入ip+端口+路徑即可查看網(wǎng)站。
http://172.56.192.157:80/dist/ng-china
同理，也可以手機(jī)和電腦連同一個wifi，在手機(jī)端進(jìn)行查看頁面適配。
相關(guān)文章
客戶端表單驗證是AngularJS里面最酷的功能之一。 AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗證指令。在這里，我們將談?wù)剮讉€最流行指令，然后我們將討論如何編寫自定義的驗證。2015-01-01
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
利用Angularjs和bootstrap實現(xiàn)購物車功能
在學(xué)習(xí)了如何簡單開始一個Angular程序之后，跟著網(wǎng)上的教程我也來實現(xiàn)一個購物車功能，為了減少頁面樣式設(shè)計我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-08-08
AngularJS標(biāo)簽頁tab選項卡切換功能經(jīng)典實例詳解
這篇文章主要介紹了AngularJS實現(xiàn)標(biāo)簽頁tab選項卡功能,結(jié)合實例形式總結(jié)分析了各種常用的tab選項卡切換操作實現(xiàn)技巧與相關(guān)操作注意事項,需要的朋友可以參考下2018-05-05
Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程
網(wǎng)上很多教程過時，命令在angular4中不適用等等，所以下面這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
本文主要講解AngularJs bootstrap，這里整理了詳細(xì)的資料及簡單示例代碼幫助大家學(xué)習(xí)或者參考，有需要的小伙伴看下2016-09-09
掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
AngularJS使用自定義指令替代ng-repeat的方法
這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來一起看看吧。2016-09-09
Angular.JS中指令ng-if的注意事項小結(jié)
這篇文章主要給大家分享了關(guān)于Angular.JS中指令ng-if的一點注意事項，分享出來供大家參考學(xué)習(xí)，文中介紹的還是相對來說比較詳細(xì)，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。2017-06-06
AngularJS基礎(chǔ) ng-readonly 指令簡單示例
本文主要介紹AngularJS ng-readonly 指令,這里對ng-readonly指令的資料做了整理，有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下2016-08-08