一、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,因为现在大多数公司用的还是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最大的好处之一就是具备高度可测试性。控制器、服务、指令、路由,每一处都可以进行单独测试。
六、美图一张
每篇文章都会在文末献上美图一张