AngularJS开发者指南（Developer Guide）翻译系列之总览（一）-CSDN博客

　　为什么想翻译Angular Developer Guide这个系列的文章？

　　最近在学习由Google推出的前端JavaScript框架AngularJS，其强大的模型与视图的数据双向绑定（two-way data binding）、扩展html原生标签、e2e测试让人惊讶，时而有一探究竟的冲动，可苦于英文能力有限，进度缓慢，相信许多国内前端同仁们都有同样的困扰。一人独行不如众人齐行，故产生将AngularJS做个翻译的念头，一是督促自己学习，再来也可以帮助想学习这个神器的童鞋们省去一些时间，快速上手，然后大家也能够互相交流共同学习不是？

　　英文能力有限，出现翻译错误在所难免，望大牛们假如看到有翻译不准或错误的地方，还请斧正，不甚感激^_^

　　注：所有文章的原始内容全部来自官网的这个页面http://docs.angularjs.org/guide

What Is Angular?

Angular是什么？

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Out of the box, it eliminates much of the code you currently write through data binding and dependency injection. And it all happens in JavaScript within the browser making it an ideal partner with any server technology.

AngularJS是一个用于（构建）动态web程序的结构化框架。它让你将HTML当成你的模版语言，并且能扩展HTML的语法来清晰地和间接地呈现你的应用程序组件。

从另外一个角度看，它将减少你目前书写的大部分数据绑定和依赖注入的代码，而且这些（指扩展语法、减少代码）都发生在浏览器端，所以让Angular看起来是一种任何服务器端技术的理想搭档。

Angular is what HTML would have been had it been design for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating application, and as a result building web-applications is an exercise in what do I have to do, so that I trick the browser in to doing what I want.

Angular是一个如同HTML那样一个已被用作设计程序（的语言）。HTML是一种书写静态文档的很棒的声明式语言。但是它并不包括太多如创建应用程序，当我想创建一个应用程序，

我得做出大量的工作（指HTML的可编程性不够好），所以我略施小计让浏览器做我想做的事。

Impedance mismatch between dynamic-applications and static-documents are often solved as:

当动态的应用程序和静态的文档出现匹配阻力时，通常按如下方式解决：

library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. i.e.: jQuery
库 - 写程序时一批很有用的函数。你的代码完全掌控你想做的事。如：jQuery
frameworks - a particular implementation of a web-application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. i.e.: knockout, sproutcore, etc...
框架 - web程序的一种特别的实现，你可以将你的代码放到其中。框架掌控你的代码，你的代码将会框架需要的时候调用。

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives. Examples include:

Angular采用了另外一种方式，它尝试生成新的HTML结构（组件）来最小化以文档为中心的HTML和应用程序所需之间的不匹配阻力。Angular通过一种结构，我们称之为directive的方式来教浏览器新语法，例子包括：

Data binding as in {{}}.
数据绑定通过{{}}
DOM control structures for repeating/hiding DOM fragments.
DOM结构控制 - 重复和隐藏DOM片段
Support for forms and form validation.
支持表单和表单验证
Attaching code-behind to DOM elements.
在DOM节点上附加隐藏代码
Grouping of HTML into reusable components.
将HTML组合成可复用的组件

End-to-end solution

端对端的解决方案

Angular tries to be an end to end solution, when building a web-application. This means it is not a single piece in an overall puzzle of building a web-application, but an end-to-end solution. This makes Angular opinionated about how a CRUD application should be built. But while it is opinionated, it also tries to make sure that its opinion is just a starting point, which you can easily change. Angular comes with the following out-of-the-box:

Angular在构建一个web程序时，尝试成为一种端对端的解决方案。这也就意味着它不旨在解决构建web程序时解决一两个问题，而是提供整套的解决方案。这让Angular对于怎样构建一个CRUD程序有独特的见解，但是既然是一种见解，所以Angular也确保这种见解只是一个开始点，而你可以很容易地更改。

Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating directives, form validation, routing, deep-linking, reusable components, dependency injection.
所有你构建需要的东西都在一个紧密结合的集合中：数据绑定、基本的模板指引、表单验证、路由、深链接、可复用的组件和依赖注入。
Testability story: unit-testing, end-to-end testing, mocks, test harnesses.
测试能力：单元测试、端对端测试、模拟和测试工具。
Seed application with directory layout and test scripts as a starting point.
种子工程，里边已内建目录结构以及测试脚本。

Angular Sweet Spot

Angular适用场景

Angular simplifies the application development by presenting a higher level of abstraction to the developer. Like any abstraction, it comes at a cost of flexibility. In other words not every app is a good fit for Angular. Angular was built for the CRUD application in mind, luckily CRUD applications represent at least 90% of the web applications. But to understand what Angular is good at one also has to understand when an app is not a good fit for Angular.

Angular通过对开发者提供一个高级别的抽象来简化开发。如同任何一种抽象那样，都以损失灵活性为代价。换句话说，不是每种应用程序都适合适用Angular，Angular是为CRUD类型的程序而出现，幸运地是，90%以上的web应用程序都是CRUD类型的。但是了解Angular擅长项的同时也应该了解它不擅长什么。

Games, and GUI editors are examples of very intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are not a good fit for Angular. In these cases using something closer to bare metal such as jQuery may be a better fit.

游戏和GUI编辑器都是强化和取巧类型程序的范例。这些程序都不同于CRUD类型的程序，所以它们都不适合使用Angular。在这些场景中，使用原生的东西，如jQuery或许更好。

An Introductory Angular Example

一个引导性的Angular范例

Below is a typical CRUD application which contains a form. The form values are validated, and are used to compute the total, which is formatted to a particular local. These are some common concepts which the application developer may face:

下边的程序是一个包含表单的典型CRUD程序。表单值被验证，被计算，然后结果被格式化为某种本地格式。以下都是开发人员将要面对的事情：

attaching data-model to the UI.
将数据模型附加到UI上。
writing, reading and validating user input.
写、读和验证用户输入。
computing new values based on the model.
计算基于数据模型的新值。
formatting output in a user specific locale.
格式化输出为用户需要的格式。

 1 <!doctype html>
 2 <html ng-app>
 3   <head>
 4     <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
 5     <script src="script.js"></script>
 6   </head>
 7   <body>
 8     <div ng-controller="InvoiceCntl">
 9       <b>Invoice:</b>
10       <br>
11       <br>
12       <table>
13        <tr><td>Quantity</td><td>Cost</td></tr>
14        <tr>
15          <td><input type="integer" min="0" ng-model="qty" required ></td>
16          <td><input type="number" ng-model="cost" required ></td>
17        </tr>
18       </table>
19       <hr>
20       <b>Total:</b> {{qty * cost | currency}}
21     </div>
22   </body>
23 </html>

script.js

1 function InvoiceCntl($scope) {
2   $scope.qty = 1;
3   $scope.cost = 19.95;
4 }

实际效果还请各位访问这个网址

http://jsfiddle.net/api/post/library/pure/

Try out the Live Preview above, and then let's walk through the example and describe what's going on.

试试上边的实例预览（注：Angular官网基本上所有例子都有预览，这个很赞！），让我们一起来看一下这个例子，描述发生了什么。

In the <html> tag, we specify that it is an angular application with the ng-app directive. The `ng-app' will cause the angular to auto initialize your application.

在<html>标签中，我们使用ng-app指引（directive）来指定这是一个angular应用程序，`ng-app`将会让angular自动初始化你的程序。

<html ng-app>

We load the angular using the <script> tag:

我们通过<script>标签来加载angular。

<script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>

From the ng-model attribute of the <input> tags, angular automatically sets up two-way data binding, and we also demonstrate some easy input validation:

通过<input>标签的ng-model属性，angular自动建立起（数据模型和DOM）双向数据绑定，同时我们也证明了其简单的验证能力。

Quantity: <input type="integer" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >

These input widgets look normal enough, but consider these points:

这些输入小挂件看起来很平常，但是考虑以下点：

When this page loaded, angular bound the names of the input widgets (qty and cost) to variables of the same name. Think of those variables as the "Model" component of the Model-View-Controller design pattern.
当页面加载完，angular绑定了input小挂件中的名字（qty和cost）到具有相同名字的变量中。可认为这些变量为MVC设计模式中的M。
Note that the HTML widget input has special powers. The input invalidates itself by turning red when you enter invalid data or leave the the input fields blank. These new widget behavior make it easier to implement field validation common in CRUD applications.
注意input有特别的能力。这些输入框在用户输入不合法数据或留空时，输入框会变红。这些新的组件行为会让在CRUD程序在验证输入时更简单。

And finally, the mysterious {{ double curly braces }}:

最后，神秘的 {{ 双花括号 }}

     Total: {{qty * cost | currency}}

This notation, {{ _expression_ }}, is angular markup for data-binding. The expression itself can be a combination of both an expression and a filter: {{ expression | filter }}. Angular provides filters for formatting display data.

这个注解，{{ 表达式 }}，是angular中标示数据绑定的标记。这个表达式本身可成为表达式和过滤器（注：过滤器是angular实现的一种格式化输出的一种技术，后会翻译到），angular提供用于格式化显示数据的过滤器。

In the example above, the expression in double-curly braces directs angular to "Bind the data we got from the input widgets to the display, multiply them together, and format the resulting number into output that looks like money."

在上边的例子中，双花括号里的表达式做了以下几件事：

1、从输入框组件中获取输入值；

2、将qty和cost相乘；

3、将结果格式化以使结果看起来像是金额。

Notice that we achieved this application behavior not by calling angular methods, nor by implementing application specific behavior as framework. We achieved the behavior because the browser behaved more in line what is needed for dynamic web-application rather then what is needed for static-document. Angular has lowered the impedance mismatch to the point where no library/framework calls are needed.

注意：我们获取这些程序行为不是通过调用angular的方法，也不是实现了框架的任何特别的函数。我们获取这些行为是通过让浏览器表现的更像动态程序需要的，而不是静态文档需要的。Angular将不匹配阻力降低到不需要使用库/框架（注：其实Angular内部还是使用jQuery或其仿jQuery实现的jqLite）。

The Zen of Angular

Angular的禅义

Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic.

Angular的理念是在构建UI和将软件组件组合时，声明式的代码比命令式的更好，而使用声明式的代码对于表达业务逻辑最佳。

It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves the testability of the code.
将DOM操作与app逻辑解耦是一个很好的想法，这戏剧性地提高了代码的可测试性。
It is a really, really good idea to regard app testing as equal in importance to app writing. Testing difficulty is dramatically affected by the way the code is structured.
将写app与测试app当成同等重要是一个很好的想法。测试难度严重受代码如何构建影响。
It is an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
将app客户端从服务端解耦是一个极好的想法，这让开发工作可以并行，同时允许客户端/服务端的复用。
It is very helpful indeed if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing.
假如一个框架能够指引开发人员的整个开发流程，包括设计UI，写业务逻辑和测试，其实也很有帮助。
It is always good to make common tasks trivial and difficult tasks possible.
让通用的任务琐碎和复杂的任务可能总是好的。（注：这句真心看不懂~~~~(>_<)~~~~ ）

Angular frees you from the following pain:

Angular让你从以下痛点中解脱：

Registering callbacks: Registering callbacks clutters your code, making it hard to see the forest for the trees. Removing common boilerplate code such as callbacks is a good thing. It vastly reduces the amount of JavaScript coding you have to do, and it makes it easier to see what your application does.
注册回调：注册回调让你的代码杂乱无章，更难看到森林中的树（注：指更难看到真正有用的代码）。移除陈词滥调代码如回调是一件好事。它让你很大限度的减少JavaScript代码，而且让你更容易看清楚你的程序做了什么。
Manipulating HTML DOM programmatically: Manipulating HTML DOM is a cornerstone of AJAX applications, but it's cumbersome and error-prone. By declaratively describing how the UI should change as your application state changes, you are freed from low level DOM manipulation tasks. Most applications written with angular never have to programmatically manipulate the DOM, although you can if you want to.
通过编程操作HMTL DOM：操作HTML DOM是AJAX程序的基石，但是它很笨重而且容易导致错误。通过声明式地描述当应用程序状态改变时UI该如何变化，将你从底层的DOM操作任务中解放出来。许多用angular写的程序不需要通过编程来操作DOM，但是如果你想，你还是能那样做。
Marshaling data to and from the UI: CRUD operations make up the majority of AJAX applications. The flow of marshaling data from the server to an internal object to an HTML form, allowing users to modify the form, validating the form, displaying validation errors, returning to an internal model, and then back to the server, creates a lot of boilerplate code. Angular eliminates almost all of this boilerplate, leaving code that describes the overall flow of the application rather than all of the implementation details.
将数据从UI中编组，也可以将数据编组到UI中：CRUD操作构成了AJAX程序的大部分。将数据从服务器编组到一个内部对象，再到HTML表单，允许用户来修改表单，验证表单，显示验证错误，返回一个内部对象，最后将数据返回到服务器，产生了许多的陈词滥调代码。Angular减少了绝大部分这类的陈词滥调，留下了描述应用程序整体流程的代码，而不是所有实现细节。
Writing tons of initialization code just to get started: Typically you need to write a lot of plumbing just to get a basic "Hello World" AJAX app working. With angular you can bootstrap your app easily using services, which are auto-injected into your application in a Guice-like dependency-injection style. This allows you to get started developing features quickly. As a bonus, you get full control over the initialization process in automated tests.
写许多的初始化代码只为了让程序跑起来：典型地，你将写一大堆代码来让你一个“Hello World”的AJAX程序运行起来。通过使用angular services（注：angular中的术语，后边会介绍），你能简单地启动你的程序，这些services可以自动注入到你的应用程序当中。这个特性能让你迅速开始你的功能开发。作为奖励，在自动化测试中，你能够得到初始化过程的完全控制。