AngularJS教程 AngularJS从0到1——初识AngularJS

一、AngularJS是谁，从何处而来，欲往何处而去

AngularJS 是一个JavaScript框架，是Google的一个开源项目。最初由Misko Hevery 和Adam Abrons于2009年开发。现已更新到2.x版本，但是目前使用较多的还是1.x版本。

AngularJS是为了克服HTML在构建应用上的不足而设计的，Angular能够更好地为单页面应用服务(SPA,single page application。后面章节会专门讨论单页面应用)。

二、凭啥这么NB

据传，当年Google一个项目组在Google Feedback项目上奋战了数月，希望能产出高效、可维护的项目。可惜事与愿违，写了18000行代码，而且还存在一些bug。这个时候AngularJS之父Misko出现了，用时3周，写了1500行代码，完成了Google Feedback项目。由此，Google Feedback项目也成了AngularJS的开山之作。

三、我能用AngularJS做什么

从根本上来讲AngularJS是一个JS框架，所以JS能做的事用AngularJS都能做。另外，AngularJS更加强大的是对数据双向绑定、服务依赖注入、单页面路由配置、自定义指令等（这些在后续教程都会讲到）。

四、AngularJS和jQuery有何区别

在学习AngularJS之前，你是否已经学过jQuery了?那么这两者有哪些区别呢？网上能找到的言论有很多，但很多都不解渴。这里我简单总结2点：

• jQuery在对DOM（即HTML文档节点元素）操作方面更加强大
• AngularJS在对数据操作方面更加强大，包括数据的获取（联网）和数据展示（双向绑定），需要代码量更少

当然，二者的区别绝不限于此

或者你还会问，那我二者只学其一可以吗？如果只学其一的话，该学什么好呢？

如果二者只学其一，我建议你学jQuery，因为现在大多数公司用的还是jQuery，AngularJS确实NB，但是毕竟年龄小，不能与jQuery这种前辈拼资历，只能拼体力和技能。如果你尚有精力学习AngularJS，那么我相信你会在后续开发中获益匪浅。说不定你能引领贵公司开发团队新风尚。:)

五、AngularJS哲学

1. 数据驱动

数据驱动也可叫双向绑定。举个例子：
在input输入框中输入内容后，span标签中的文本随之改变。如果用js或者jquery实现，你会怎样做？

<input type="text" />
<span></span>

假如我们用AngularJS来实现，只需如下改动即可：

<input type="text" ng-model="mytext"/>
<span ng-bind="mytext"></span>

怎么样？一行js代码都不需要写，这就是双向驱动、数据绑定。

2. 显式声明

何谓显式声明呢，我们再举个例子。
请看这样一段代码，代表什么意思

<tabs>
    <tab title="home">第一部分内容</tab>
    <tab title="profile">
        <input type="text" datepicker/>
    </tab>
</tabs>

简单一段代码，相信更接触编程的人，也能一眼就看出这段代码的大概意思——一组tab标签，其中一个直接显示内容，另一个显示一个输入框，用来输入日期。
AngularJS就是这样，它会利用自定义标签尽量把语义直接表达清楚，告诉开发人员，这段代码是什么意思，不需要我们去猜、去查找。也正是因为如此，AngularJS提高了其代码的可维护性。

3. 概念分离

这里不需要多讲了，AngularJS框架是MVC架构的，也有人说是MVVM架构（Model,View,ViewModel）。总之，AngularJS是将模型、视图、控制器分离对待的。

4. 依赖注入

AngularJS是少有的依赖注入的JS框架之一。何为依赖注入呢？通俗来讲，就像人打疫苗一样，本来不具备抵抗病毒能力，注入疫苗之后，就有了抵抗病毒的能力。技术和生活是相通的，AngularJS中的注入也是类似概念。我们可以在一个控制器中注入很多种服务（服务是个很重要的概念，后面会讲），比如网络访问服务，那么这个控制器就拥有了访问网络的能力。

如果你学过Java，你会知道，这有点像Java中的导包，我们导入某个包后，就可以使用该包下的类进行操作。

5. 可扩展性
可扩展性尤其指的是指令扩展，即自定义指令，我们可以自由定义AngularJS指令，在HTML中使用标签调用即可。比如：

<zhangsan></zhangsan>

我们可以在页面中写这样一组标签显示张三的个人信息，包括照片、履历、兴趣爱好等。每个页面只要需要的地方，只需要调用这一组标签即可，是不是很方便？

6. 可测试性

AngularJS最大的好处之一就是具备高度可测试性。控制器、服务、指令、路由，每一处都可以进行单独测试。

六、美图一张

每篇文章都会在文末献上美图一张

---