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