02引言-AngularJS基础教程

發表於   |   分類於

1. 前言

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了，所以AngularJS做了一些工作来来解决静态网页技术在构建动态应用上的不足。

AngularJS的初衷是为了简化web APP开发，精髓是简单。但是国内外有很多AngularJS的教程，都着重讲AngularJS的强大之处，从而增加了AngularJS学习的难度，本教程试图用通俗的语言讲解最为基础、最为实用的内容，简化学习进程、降低学习难度是本教程的初衷。

本系列教程以翻译Chris Smith的Angualr Basics为梗概，融合博主自己的理解，为大家提供一个简单明了的学习教程。本文为系列教程第2篇引言，翻译自Introduction。

  1. 序
  2. 引言-Introduction
  3. 基础-Basics
  4. 控制器-Controllers
  5. 作用域-Scopes
  6. 集合-Collections
  7. 模块-Modules
  8. 依赖注入-Dependency Injection
  9. 服务-Services
  10. 过滤器-Filters
  11. 指令-Directives
  12. 指令作用域-Directive Scopes
  13. 路由-Routing
  14. 通信-HTTP
  15. 结论

2.正文

这是一本袖珍书，灵感来自于其他免费、简短、友好的编程书，例如Alex MacCaw的《The Little Book on CoffeeScript》。我写这本书的目的是像我学习AugularJS那样介绍它，关注典型环境的快速web开发中如何应用AngularJS。依据帕累托原则（Pareto principle）， 优先讲简单、实用的功能，课程结束之后，您可能只了解AngularJS的一部分，却可以利用该框架轻松创建强大的前端应用。本书是一个动态网站，所有案例使用最新版的AngularJS（Angular 1.3.14），如果您倾向于交互学习，那么修改代码指令，您可以实时的看到运行效果，鼓励大家进行探究性、实验性学习。

如果您想了解更多我为什么写这本书，了解AngularJS的历史，AngularJS是否适合您的项目，请继续阅读本文，如果您非常确定您为什么阅读本文，急于学习AngularJS请移步系列教程第03篇基础。

##2.1 AngularJS 难或易?
我有近十年的web MVC的工作经验，从 Struts 到Spring MVC到Ruby on Rails到Backbone，我甚至还写了一本Backbone and CoffeeScript方面的书，因此我自认为学习AngularJS起来肯定非常简单。但是，当我沉浸在API和文档中时，我发现各种各样不熟悉的名词和术语（transclusion, directive, and isolate scope）阻碍了学习进程，当我阅读官方文档和教程时，所谓的简单易学好像没有出现，反而是一头雾水，比如说下面这段折磨人的文字。

The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

现在官方文档里面已经没有这段文字了，通过AngularJS官方团队的不懈努力，官方文档的可读性进一步增强了很多。但是，当我第一次阅读时，这段文字让我感觉非常无知，好像走进了一个新的领域，我感觉到AngularJS是一个复杂的技术（没有开玩笑）， AngularJS的各种细节在广泛的被讨论，难以调试、怪癖、陷阱等。

像任何自尊自爱的程序猿一样，我撸起袖子奋战到底，慢慢地我熟悉了那些名词和术语，以为学习必然有点陡。直到有一天，我看到AngularJS的创始人Miško Hevery的视频采访，根据Hevery的解释，我发现了一个简单而又重要的事实：

使用简单是AngularJS的初衷

Hevery解释道，当他构思AngularJS时，把它作为非编程人员仅仅使用预定义的标签就能创建动态web应用的工具。我才意识到，我卷入了太多的AngularJS的细节而没有获得相应的收益。Angular项目及相关社区在相互协作方面投入太多精力，增加了Angular的复杂性和学习的难度，我们需要探索更好的使用方式以趋近于Angular的开发初衷，去除大量的精巧设计的控制，不考虑微弱的内部安全隐患，直接向前。

对我来说这个方法是正确的，尽管Angular不是我唯一的web开发语言，但绝对是最闪耀的那个。

2.2 您需要Angular吗？

虽然类似于Angular的客户端js工具让创建单页面应用变得如此简单，但是不少web项目仍然使用传统的架构，服务端渲染、jQuery实现交互。坦率的讲，您需要考虑您的项目是否需要在客户端管理数据、渲染html，您是否有足够的理由开始尝试一项新的技术。

当然，Angular是一个明显的、固执己见的选择(Angular is a broad, opinionated solution)。虽然通常被认作一个库，但是Angular内置的对模块化、依赖注入的支持，将会改变您的项目管理方式。如果你想找一个Angular的替代方案，或许更加成熟的，或许最佳的，但是这些都不可能完全替代Angular。除非您的项目肯定能达到Google工程师认为的经典的水准，你可能不需要达到Angular核心团队认定的组织支持的水平。依赖注入尽管可以用在单元测试方面，但还是太过复杂，大家可以到Dependency Injection 看看实在的案例。

当您需要引入非Angular代码和Angular的数据绑定和渲染机制协同工作的话，将会产生另一个问题，您需要非常深入这些神秘的细节。相对来说，Backbone基于jQuery，更加简单、更加易于理解，如果您的项目深度依赖jQuery，利用Backbone实现渐进增强也是一个不错的选择。

另外，Angular在UI组件和模型对象之间的双向绑定，也会增加应用的复杂性。Facebook的开发者分享了双向数据绑定中的挫败感：

我们发现双向数据绑定容易导致级联更新： 一个对象的改变导致另一个对象的改变，甚至更多对象的改变。随着应用的增长，由用户行为导致的级联更新将会很难预测。

相对于Angular来说，尽管Facebook的 React不重在关注渲染，但是基于React的客户端技术也值得一试。

2.3 使用Angular的理由

Angular可能是当今最流行的Javascript MV*解决方案，github得到了36722个star，当然阅读本文时可能更多。它迅速从同类的解决方案中脱颖而出，成为顶级解决方案，大家可以到TodoMVC project比较诸多MV*方案。让我们来看看Angular成功的原因。

  • 快速成型（Immediate productivity）
    如果您的项目需要用户界面实现数据的增删改查操作，Angular可以非常漂亮地兑现快速成型的承诺。仅仅需要在普通的html添加几个属性，使用少量的几行javascript代码你就可以实现普通类库需要大量技能、大量努力才能实现的功能。
  • 熟悉度
    Angular包含开发人员熟知的原生JS和几乎普通的HTML，用几乎这个词主要是因为Angular引入了一些新增的html元素，属性和一些可能看起来恐怖的行内代码。相对于其他模板系统，Angular已经非常接近html了，大部分开发人员都能够轻松理解。
  • 适应性
    Angular可以很好支持当前的UI核心的JS类库，如果想使用类似于Bootstrap这样的流行类库的话，您可以有效利用AngularUI这样的第三方项目实现简单整合。所以，无论你想为传统文档中心网站增加交互性，还是开发一个炫彩的单页面应用，Angular都可以是一个不错的选择。
  • 未来标准
    尽管我不能确定Angualr能达到什么高度，Angular母公司Google会如何创造未来，有一点非常明确，Angular的使用方式非常接近目前提出的标准 Web Components，另外，Angular接近于下个版本Javascript的特征（例如Object.observe）它的基础原则将会被维持而不会弃用。
  • 社区
    当然，一个非常重要的原因是它非常流行，应用于大量的超负荷网站中，Google的定力支持，大量的插件和学习资源。当然大部分人的正确选择不一定是每个人的正确选择，你还需要谨慎考虑Angular是否真的适合您。

2.4 关于本书

很多年前当我在My MacBook Air上阅读一本JS编程书时，已经有了脚本书( ScriptyBooks)的点子。需要运行书中的一个案例时，我们从网站中下载案例，着急于如何打开它，从大量的文件中找到需要的文件，费劲九牛二虎之力找到正确的文件，打开它，修改它，但是很可能你还是不能运行，你可能需要安装支持环境。

为什么我们在讲解一个前端技术时，还需要耗费诸多努力才能运行一个案例，如果能够可以在书中展示代码，允许您进行修改，并且实时展示代码呈现结果，那就很美妙了。

本书采用这样的方式。所有代码均可以动态修改，并实时展示代码运行结果。如下所示。

1
<strong>The lucky number {{3 + 5}}.</strong>

The lucky number 8.

我利用 CodeMirror 和Angular实现动态交互功能，如果还是angular菜鸟，不妨修改下上面的代码，看看会发生什么(博客支持技术有限，本教程没有提供动态修改代码功能，望见谅。请阅读原教程代码)。

2.5 接下来

接下来，准备讲解客户端模板(client-side templating)和双向绑定(two-way bindings)，向您展示Angular的基础。尽管大部分代码非常简单，一眼看过去就可以理解，但相信哪怕有经验的Angular开发人员也可以有所收获。

3.声明

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/44596577
欢迎大家访问独立博客http://whqet.github.io