使用xampp將angular項目運行在web服務(wù)器的教程
需求
在開發(fā)angular項目時,因為需要做自適配以適應(yīng)不同的屏幕,而我的電腦只有1366的。所以我現(xiàn)在需要在本地將angular項目運行在xampp上,然后用手機開熱點,給本機和另一臺大屏電腦或手機連同一wifi,再使用大屏電腦或手機打開本地電腦運行的網(wǎng)站查看適配情況。
安裝xampp
下載地址:https://sourceforge.net/projects/xampp/
下載好之后,一路勾選下去就ok了,出現(xiàn)問題請自行百度解決。
開啟xampp
如果你是安裝好之后進行開啟,那么直接在底部欄的任務(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}],
在項目下進行ng build生成包(使用git bash here)
ng build
完成后可以看到項目下多出來一個dist文件,如下:
在xampp下啟動web服務(wù)
將項目中的dist文件拷貝/剪切到xampp安裝目錄下的htdocs文件夾下,如下:
至此,就算開啟了項目的web服務(wù)器,我們可以去瀏覽器中進行驗證
在如上url下,可以看到如下的內(nèi)容:
點擊ng-china,這個就是我的項目,點擊進去就可以看到自己寫的網(wǎng)站了,圖片如下:
從別人電腦下進入網(wǎng)站
使用手機給兩臺電腦一起開熱點,或者鏈接同一個wifi,這樣兩個電腦就在同一個局域網(wǎng)下面了。
查看運行網(wǎng)站電腦的ip,注意,因為連的是wifi,此時查看的必須是WLAN的ipv4地址,使用ipconfig查看圖片如下:
此時,在別人電腦上輸入ip+端口+路徑即可查看網(wǎng)站。
http://172.56.192.157:80/dist/ng-china
同理,也可以手機和電腦連同一個wifi,在手機端進行查看頁面適配。
相關(guān)文章
AngularJS實現(xiàn)動態(tài)切換樣式的方法分析
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)切換樣式的方法,結(jié)合實例形式分析了AngularJS事件響應(yīng)與樣式動態(tài)控制相關(guān)操作技巧,需要的朋友可以參考下2018-06-06AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下2016-11-11Angular ui.bootstrap.pagination分頁
這篇文章主要為大家詳細(xì)介紹了Angular ui.bootstrap.pagination 分頁的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01AngularJS使用ng-app自動加載bootstrap框架問題分析
這篇文章主要介紹了AngularJS使用ng-app自動加載bootstrap框架問題,分析了前面文章中所述的ng-app自動加載bootstrap出現(xiàn)的錯誤原因與相應(yīng)的解決方法,需要的朋友可以參考下2017-01-01

AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)

AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例

AngularJS ng-bind 指令簡單實現(xiàn)