02引言-AngularJS基础教程

小咪咪 2022-08-07 07:57 206阅读 0赞

# 0. 目录 #

*  目录
 *  前言
 *  正文
    
     *  1 AngularJS 难或易
     *  2 您需要Angular吗
     *  3 使用Angular的理由
     *  4 关于本书
     *  5 接下来
 *  声明

# 1. 前言 #

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

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

本系列教程以**翻译*Chris Smith***的[**Angualr Basics**][Angualr Basics]为梗概，融合博主自己的理解，为大家提供一个***简单明了***的学习教程。本文为系列教程第2篇引言，翻译自[**Introduction**][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。依据[帕累托原则][Link 1]（[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方面的书][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的[视频采访][Link 2]，根据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][Backbone and CoffeeScript])的点子。需要运行书中的一个案例时，我们从网站中下载案例，着急于如何打开它，从大量的文件中找到需要的文件，费劲九牛二虎之力找到正确的文件，打开它，修改它，但是很可能你还是不能运行，你可能需要安装支持环境。

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

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

<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_blog.csdn.net_whqet_article_details_44596577]  
欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]

[Angualr Basics]: http://www.angularjsbook.com/
[Introduction]: http://www.angularjsbook.com/angular-basics/chapters/introduction/
[The Little Book on CoffeeScript]: http://arcturo.github.io/library/coffeescript/index.html
[Link 1]: http://www.360doc.com/content/12/0421/17/3908533_205453356.shtml
[Pareto principle]: http://en.wikipedia.org/wiki/Pareto_principle
[Backbone and CoffeeScript]: http://www.scriptybooks.com/books/backbone-coffeescript
[Link 2]: https://www.youtube.com/watch?v=X0VsStcCCM8
[Dependency Injection]: http://www.angularjsbook.com/angular-basics/chapters/dependency-injection/
[Backbone]: http://backbonejs.org/
[React]: http://facebook.github.io/react/
[TodoMVC project]: http://todomvc.com/
[AngularUI]: http://angular-ui.github.io/
[Web Components]: http://www.w3.org/TR/components-intro/
[Object.observe]: http://wiki.ecmascript.org/doku.php?id=harmony:observe
[CodeMirror]: http://codemirror.net/
[http_blog.csdn.net_whqet_article_details_44596577]: http://blog.csdn.net/whqet/article/details/44596577
[http_whqet.github.io]: http://whqet.github.io