**访问网页和我们去商场买东西的原理基本是相同的。**
我们去商场买东西:首先将需求提交给售货员,然后售货员分析我们的需求,并递交给我们想要的商品。
访问网页:我们将请求提交给服务器,服务器分析我们的请求,并返回我们想要的结果。
这里的服务器是个比较宽泛的词。我们说服务器其实也是一台计算机,只是由于它的功能是提供一些服务,那么我们给它起的名字叫服务器。就像商场也是一个房子,只是因为这个房子起到了卖东西的作用,所以我们把它叫做商场。
商场提供卖东西的服务,需要有售货员。计算机提供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,如下图所示:
![](https://box.kancloud.cn/2016-07-18_578ce50e8a3ae.png)
点击进入后,还可以查看具体的信息。
![](https://box.kancloud.cn/2016-07-18_578ce50ea4f22.png)
正如它的介绍一样:
> 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介绍页面中,还给出了安装与使用的方法,如下图所示:
![](https://box.kancloud.cn/2016-07-30_579b7dc324a23.png)
没错,只是简单的几行英文而已,既然没有几行,就翻译一下吧。
## 安装
打开git bash,输入`npm install http-server -g`
(注意:mac中需要使用 `sudo npm install http-server -g`),
然后我们需要的是耐心的等待,当然了,有时候可能会由于我们的网络问题,导致安装不成功。如果出现了安装错误,请查看是否是由于未请求到资源而导致的。
资源未能成功请求到,基于上可以确定是网络问题了,这时候你可以下载一个最新的HOSTS,或是找一款免费的、可以使用的VPN来帮助你。当然了,如果你还不能成功突破网络限制,那么你首先需要百度来解决这个问题。
安装过程如下图所示:
![](https://box.kancloud.cn/2016-07-18_578ce50edc394.png)
## 启动
使用`http-server`来启动http服务,如下图所示:
![](https://box.kancloud.cn/2016-07-18_578ce50ef0417.png)
成功启动后,将会显示访问的地址,比如,上图显示的地址为:
http://127.0.0.1:8080
或 http://192.168.1.105:8080
![](https://box.kancloud.cn/2016-07-18_578ce50f41041.png)
由于我当前的目录中并没有index.html这个文件,所以将会显示目录列表。
按照提示,我们可以使用`ctrl+c`来终止服务。
下面,我们尝试切换一下文件夹,首先使用`ctrl+c`终止当前的http服务。然后依次输入以下命令:
~~~
cd /d
mkdir yunzhi
cd yunzhi
echo 'hello yunzhi' >> index.html
http-server
~~~
上面这些都是基本的bash命令,现在我们的主要目的是学习angularjs,其实只要明白大致的意思,然后按照上面的命令执行就可以了。
此时,再按照相应的提示进行访问,将会输入我们刚刚建立的index.html文件的内容,显示如下:
![](https://box.kancloud.cn/2016-07-18_578ce50f568bb.png)
所使用命令的示例如下所示:
![](https://box.kancloud.cn/2016-07-18_578ce50f67adc.png)
有了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
- 第十节:完善手机详情页
- 第十一节:自定义过滤器
- 第十二节:行为处理
- 第十三节:封装请求
- 第十四节:应用动画
- 第十五节:总结
- 第三章:菜谱管理示例
- 第四章:总结