AngularJS与浏览器基础

前言：本文主要帮助熟悉与AngularJS有关的一些术语和技术，以及它们背后相关的工作原理。即使以前从来没有接触过AngularJS，通过将零碎的知识点组合在一起，你也可以构建一个属于自己的AngularJS应用。

1、浏览器如何获取网页

我们把互联网想象成一个邮局：当你想给朋友写信时，首先要把内容写在一张信纸上，然后在信封上写上地址，再把信纸装进信封。

当你把信送到邮局，邮件分拣机构会根据邮编和地址来判断你的朋友住在哪里。如果他住在一栋有很多房间的公寓大楼里面，邮局会把信件投递到大楼的前台，然后大楼的工作人员会根据房间号再次进行分拣。

互联网的工作原理和上面的过程很类似。不同的是，现实世界中由街道连接起来的楼房和公寓，在互联网世界中被路由器和网线连接起来的计算机所取代。每一台计算机都有一个唯一的地址，让网络可以定位到它。

多个公寓房间共享同一个街道地址，与此类似，多台计算机也可以共享同一个网络或路由器。比如，在使用星巴克提供的免费Wi-Fi时，多台计算机就会共享同一个公网IP地址。尽管如此，你的计算机依然可以通过路由器分配的内网IP地址被单独访问到，路由器就好比公寓大楼的工作人员，而内网IP地址就好比房间号。

IP是互联网协议（Internet Protocol）的缩写。IP地址是为每个接入到网络中的设备分配的数字标识符。计算机、打印机甚至手机都有自己的IP地址。

目前有IPv4和IPv6两种主要的IP地址类型，普遍使用的是IPv4地址，例如192.168.0.199这种形式，而IPv6地址是2001:0db8:0000:0000:0000:ff00:0042:8329这种形式的。

当你打开一个浏览器，并在地址栏输入http://google.com后，浏览器会“询问”网络（更准确地说，是“询问”DNS服务器）google.com对应的IP地址是什么？如果DNS服务器知道你要找的IP地址，就会将其结果返回；如果不知道，它会将请求转发给其他DNS服务器，直到在某一台DNS服务器上找到对应的IP地址记录。在终端输入下列指令，可以观察DNS服务器的响应内容：

$ dig google.com

如果你使用的是Mac操作系统，可以使用Terminal终端程序，它通常储存在/Applications/Utilities目录中。如果使用的是Windows操作系统，打开开始菜单，在运行中输入 cmd 就可以打开终端了。

DNS服务器返回了你要访问的计算机的IP地址（例如找到了google.com对应的IP地址）后，它就会向这个IP地址对应的计算机请求你要访问的页面。

每一个路径对应的网页都由不同的HTML文档组成（也有一些例外）。例如，当浏览器请求http://google.com或http://google.com/images时，得到的HTML文档是不一样的。

现在，计算机已经知道了在哪个IP地址可以访问到http://google.com，它会向Google的服务器请求显示这个页面所需的HTML。当远程服务器把HTML文档发送回来后，浏览器会对文档进行渲染。渲染就是通过一系列操作，使HTML页面按照设计之初的既定方式显示。

2、浏览器是什么

在介绍AngularJS之前，我们需要先了解浏览器在渲染网页的过程中都做了些什么。目前市场上有很多不同品牌的浏览器，常见的有Chrome、Safari、Firefox和IE。它们的核心功能基本上都是相同的：获取网页，并将它显示给用户。浏览器获取页面对应的HTML文本，将其解析为一个在浏览器内部使用的结构，对页面的内容进行布局，并在内容显示到屏幕上之前加上样式，所有这些工作都是在浏览器内部进行的。作为Web开发人员，我们的工作是构造网页的结构和内容，这样浏览器才能将它们转化成对用户来说比较美观的形式。使用AngularJS，不仅可以构建页面的结构，而且可以构建用户和Web应用之间的交互。

3、AngularJS 是什么

AngularJS的官方文档是这样介绍它的：

完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。

AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。

AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。

AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如：

1. 解耦应用逻辑、数据模型和视图；
2. Ajax服务；
3. 依赖注入；
4. 浏览历史（使书签和前进、后退按钮能够像在普通Web应用中一样工作）；
5. 测试；
6. 更多功能。

4、AngularJS有什么不同

在其他JavaScript框架中，我们被迫从自定义的JavaScript对象中进行扩展，并从外到内操作DOM。以jQuery为例，为了在DOM中插入一个按钮元素，我们必须知道要把元素放到何处，并在合适的位置插入它：

var btn = $("<button>Hi</button>");
btn.on('click', function(evt) { console.log("Clicked button"); });
$("#checkoutHolder").append(btn);

尽管这个过程并不复杂，但是它要求开发者对整个DOM结构都有所了解，并强迫我们在JavaScript代码中加入复杂的控制逻辑，用以操作外部DOM。

而AngularJS则通过原生的Model-View-Controller（MVC，模型视图控制器）功能增强了HTML。结果表明，这个选择可以快捷和愉悦地构建出令人印象深刻并且极富表现力的客户端应用。

利用它，开发者可将页面的一部分封装为一个应用，并且不强迫整个页面都使用AngularJS进行开发。这个特质在某些情况下非常有用，比如你的工作流程中已经包含了另外一个框架，或者你只希望页面中的某一部分是动态的，而剩下的部分是静态的或者是由其他JavaScript框架来控制的。

此外，AngularJS团队非常重视框架文件压缩后的大小，这样使用它就不会付出太多的额外代价。这一特性使得AngularJS非常适合用于开发功能原型。