**訪問網頁和我們去商場買東西的原理基本是相同的。**
我們去商場買東西:首先將需求提交給售貨員,然后售貨員分析我們的需求,并遞交給我們想要的商品。
訪問網頁:我們將請求提交給服務器,服務器分析我們的請求,并返回我們想要的結果。
這里的服務器是個比較寬泛的詞。我們說服務器其實也是一臺計算機,只是由于它的功能是提供一些服務,那么我們給它起的名字叫服務器。就像商場也是一個房子,只是因為這個房子起到了賣東西的作用,所以我們把它叫做商場。
商場提供賣東西的服務,需要有售貨員。計算機提供WEB訪問的服務,需要服務程序。能提供這個服務的軟件有很多,apache+php便是其中著名的一個。
在這里,我們將使用一個叫做**http-server**的工具,用來提供http服務。下面,就讓我們來共同見證http-server的偉大吧。
上一節我們說了,npm就是一個360管家。可這個管家畢竟是運行在node.js上的,有些東西,只能依賴命令行。比如我們想找一些關于http的工具,那么需要輸入 `npm search http` 。
有沒有更加人性化的東西呢?答案是肯定的,因為偉大的軟件從不缺乏追隨者。npm的名氣之大,以致于有很多站點為它提供了免費的列表服務。
比如:[https://www.npmjs.com/](https://www.npmjs.com/),就是其中的一個。
比如:我還可以通過關鍵字找到http-server,如下圖所示:

點擊進入后,還可以查看具體的信息。

正如它的介紹一樣:
> Http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning.
http-server是一款簡單、零配置、使用命令行、提供http服務的軟件。它雖然簡單,但卻高效,特別是應用于開發、測試與學習中。
在http-server介紹頁面中,還給出了安裝與使用的方法,如下圖所示:

沒錯,只是簡單的幾行英文而已,既然沒有幾行,就翻譯一下吧。
## 安裝
打開git bash,輸入`npm install http-server -g`
(注意:mac中需要使用 `sudo npm install http-server -g`),
然后我們需要的是耐心的等待,當然了,有時候可能會由于我們的網絡問題,導致安裝不成功。如果出現了安裝錯誤,請查看是否是由于未請求到資源而導致的。
資源未能成功請求到,基于上可以確定是網絡問題了,這時候你可以下載一個最新的HOSTS,或是找一款免費的、可以使用的VPN來幫助你。當然了,如果你還不能成功突破網絡限制,那么你首先需要百度來解決這個問題。
安裝過程如下圖所示:

## 啟動
使用`http-server`來啟動http服務,如下圖所示:

成功啟動后,將會顯示訪問的地址,比如,上圖顯示的地址為:
http://127.0.0.1:8080
或 http://192.168.1.105:8080

由于我當前的目錄中并沒有index.html這個文件,所以將會顯示目錄列表。
按照提示,我們可以使用`ctrl+c`來終止服務。
下面,我們嘗試切換一下文件夾,首先使用`ctrl+c`終止當前的http服務。然后依次輸入以下命令:
~~~
cd /d
mkdir yunzhi
cd yunzhi
echo 'hello yunzhi' >> index.html
http-server
~~~
上面這些都是基本的bash命令,現在我們的主要目的是學習angularjs,其實只要明白大致的意思,然后按照上面的命令執行就可以了。
此時,再按照相應的提示進行訪問,將會輸入我們剛剛建立的index.html文件的內容,顯示如下:

所使用命令的示例如下所示:

有了http-server,我們就可以隨意的建立文件夾、隨意的建立文件,然后就可以在瀏覽器中訪問這個文件來查看效果了。
比如,我們新建一個文件: `d:/yunzhi/angularjs/index.html`。
- 前言
- 第一章:準備知識
- 第一節:GIT
- 第二節:Node.js
- 第三節:http-server
- 第四節:bower
- 第五節:firefox+chrome
- 第二章:官方示例教程
- 第零節:Hello Yunzhier
- 第一節:靜態模板
- 第二節:MVC
- 回調函數
- 第三節:組件
- 第四節:重構組件
- 2.4.1 調用組件
- 2.4.2 規劃目錄結構
- 2.4.3 剝離V層
- 2.4.4 大話測試
- 第五節:循環過濾器
- 第六節:雙向數據綁定
- 第七節:XHR與依賴注入
- 第八節:添加縮略圖
- 第九節:模擬頁面跳轉
- 2.9.1 使用bower
- 2.9.2 使用grunt
- 第十節:完善手機詳情頁
- 第十一節:自定義過濾器
- 第十二節:行為處理
- 第十三節:封裝請求
- 第十四節:應用動畫
- 第十五節:總結
- 第三章:菜譜管理示例
- 第四章:總結