AngularJS是什么

先标明来源：

https://code.angularjs.org/1.3.15/docs/guide/introduction

也就是官网针对1.3.15版的说明

---

What Is 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. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS是一种用于开发动态页面APP的结构化框架。

通过它，你可以清晰明了地以HTML为基础，扩展其语法，来表达（标记？）界面上的组件。

AngularJS的数据绑定和依赖注入可以帮你省去很多繁琐的代码。

而且所有这些都运行在浏览器中，从而可以完美地跟任何服务器端技术相结合。

需要提前了解的概念：

1. web app：

A web application or web app is any computer program that runs in a web browser.

电脑程序放在浏览器里。

为什么要放在浏览器里？

浏览器全世界通用，但不灵活；

电脑程序灵活（跟用户交互多），但不通用。

所以把电脑程序放在浏览器里，其实就是对浏览器里的页面有高要求，要求像程序一样，呼风唤雨，要啥有啥。

所以，AngularJS就是把“在浏览器里呼风唤雨，要啥有啥”的要求给满足了的工具（框架）。

2. HTML：Hypertext Markup Language

Hypertext: Hypertext is text displayed on a computer display or other electronic devices with references to other text which the reader can immediately access, or where text can be revealed progressively at multiple levels of detail. (wikipedia)

超文本，就是在显示器上显示的文本，这种文本还要带有类似<a>一样的功能，就是一点就能看其他文本，或者一点一点一点就能看其他文本。

HTML is the standard markup language used to create web pages.

Web browsers can read HTML files and render them into visible or audible web pages. Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page. (wikipedia)

HTML是用来创建页面的标准标记语言。

a> HTML是创建web page（页面）的；

b> HTML是标准；（大家都用，所以你用别的就不太好。不过如果哪天标准变了，不过是另一个标准，看看说明书，也就好了，不用太恐慌）

c> HTML是标记语言，就是按照人家的规则，简单标记一下你的页面上，什么内容当标题（title，h1, h2, ...），什么内容要严重显示(strong什么的)

浏览器干嘛：浏览器读入HTML，按照你根据标准写的标记，来完成展示。（别问我展示干嘛，我想静静。）

然后，HTML里的标签（就是标记）和脚本就不展示了。（你见过演讲的人把“停顿，微笑”和“此处应该有掌声”念出来的吗？）

3. application：应用

computer software designed to help the user to perform specific tasks. (wikipedia)

application就是应用，什么是应用，帮助用户完成特定任务，功能的软件。这不就是软件吗？（手机APP就是application的缩写吧？）

4. data binding：数据绑定

Data binding is the process that establishes a connection between the application UI and business logic. (wikipedia)

数据绑定，就是在应用界面和业务逻辑之间建立连接的过程。简单说，就是逻辑里是啥，你就看到啥，你看到的改成了啥，逻辑里就跟着变成了啥。（双向的数据绑定）

5. dependency injection：依赖注入

Dependency injection (DI) is a design pattern where dependencies are defined in an application as part of the configuration.(OReilly Learning AngularJS 2015-3)

依赖注入（DI）就是一个把依赖（没谁就不能运行）定义成配置的设计模式（设计模式就是设计的时候大家都觉得好的办法）。

---

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

如果HTML最初是朝着应用的方向设计的，那它肯定就变成了AngularJS这样子。对静态文档而言，HTML是一个强大的声明式语言，不过它并不包含太多创建应用的东西。所以创建web app就变成了这样：我怎么让浏览器按照我的需要来工作呢？

---

The impedance mismatch between dynamic applications and static documents is often solved with:

1. a 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. E.g. jQuery.
2. 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. E.g. durandal, ember, etc.

动态应用和静态文档之间的不搭嘎的阻力，一般情况下是这样解决的：

1. 库： 就是一套可调用的函数，你的代码做东，需要调谁就调谁。比如，jQeury.
2. 框架：专门为web app开发的空架子，你只需要用自己的代码把里面的细节填一下就可以了。这样，就是框架做东，处理大部分的事，适当的情况下从你的代码里拉它需要的内容（配置，逻辑神马的）。比如durandal和ember。

---

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

Examples include:

1. Data binding, as in {{}}.
2. DOM control structures for repeating, showing and hiding DOM fragments.
3. Support for forms and form validation.
4. Attaching new behavior to DOM elements, such as DOM event handling.
5. Grouping of HTML into reusable components.

AngularJS跟他们还不一样。它通过创建新的HTML概念来降低将以文档为中心的HTML和实际应用程序所需调合在一起的阻力。AngularJS通过这种新概念增加浏览器能解析的HTML新语法，这一概念，我们称之为directive。（指令）

新语法的例子：

1. 数据绑定的语法：{{}}
2. 重复，显示，隐藏DOM片段的DOM控制结构；
3. form（表单）支持和校验；
4. 向DOM元素添加行为，比如DOM消息处理；
5. 把HTML包装成可复用的组件。

---

A complete client-side solution

Angular is not a single piece in the overall puzzle of building the client-side of a web application. It handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure. This makes Angular opinionated about how a CRUD (Create, Read, Update, Delete) application should be built. But while it is opinionated, it also tries to make sure that its opinion is just a starting point you can easily change. Angular comes with the following out-of-the-box:

1. Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating directives, form validation, routing, deep-linking, reusable components and dependency injection.
2. Testability story: Unit-testing, end-to-end testing, mocks and test harnesses.
3. Seed application with directory layout and test scripts as a starting point.

Angular不是创建客户端web app的解决方案里的一部分（它是全套解决方案），它可以接管你写的全部DOM和AJAX操作代码，而且组织还特别合理。这让Angular在app处理CRUD（增删改查，你懂的）上很顽固（翻译得好牵强）。好在，Angular也尽量把DOM和AJAX操作做得简单和可修改。Angular自带以下开箱即用特性：

1. 所有要处理CRUD的工具：数据绑定，基本模板指令（就是前面提到的教给浏览器的新HTML语法），表单验证，跳转，deep-linking，可复用组件和依赖注入。
2. 可测场合：单元测试，系统测试，模拟和测试仪。
3. （原谅我无能，看不懂啥意思）

deep-linking:

In the context of the World Wide Web, deep linking consists of using a hyperlink that links to a specific, generally searchable or indexed, piece of web content on a website, rather than the home page. (这个懒得翻了，学软件总难免看英文的。详见wikipedia)

end-to-end testing: System testing.(wikipedia)

Mock object:

In object oriented programming, mock objects are simulated objects that mimic the behavior of real objects in controlled ways. A programmer typically creates a mock object to test the behavior of some other object, in much the same way that a car designer uses a crash test dummy to simulate the dynamic behavior of a human in vehicle impacts. 模拟，就是汽车撞击试验中的假人。啥都像真的，就是是假的。

---

Angular’s sweet spot

Angular simplifies 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 with the CRUD application in mind. Luckily CRUD applications represent the majority of web applications. To understand what Angular is good at, though, it helps to understand when an app is not a good fit for Angular.

Games and GUI editors are examples of applications with intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular. In these cases it may be better to use a library with a lower level of abstraction, such as jQuery.

Angular哪儿甜？（什么情况下使用Angular会尝到甜头？）

Angular通过更高的抽象简化了web app的开发。每种高层抽象都会降低灵活性。所以Angular也不是一切web app通吃的。Angular的初衷，就是要做CRUD。好在，市面上的web app基本大多也只是个增删改查（哦呵呵）。那什么时候用Angular呢？还是说说什么时候不该用它吧。

比方说你要开发游戏，或者你要大改UI，这些需要N多操纵DOM。它们就跟CRUD应用不一样了吧，那你就不要用Angular了。这种情况下，建议还是用点更底层的库，比如jQuery.

---

The Zen of Angular

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

It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves the testability of the code.

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.

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.

It is always good to make common tasks trivial and difficult tasks possible.

Angular之禅

Angular信奉这样的理念：声明式语言更适合写界面，命令式语言更适合处理业务逻辑。

将DOM操纵和app逻辑分隔开，是灰常好滴。这会大幅度提高可测试性。

视测试与开发同等重要也是灰常灰常好滴。Angular组织代码的形式也大幅度提高了测试的简易度。

客户端和服务器端相互独立，更是灰常灰常好滴。这样就可以同时开发，也便于复用。

灰常灰常好滴，比如一般问题变脑残，复杂问题变可能。

---

Angular frees you from the following pains:

1. 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.
2. 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.
3. Marshaling data to and from the UI: CRUD operations make up the majority of AJAX applications' tasks. 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.
4. 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.

使用Angular，你就可以远离烦恼，实现以下梦想：

1. 不必自己注册回掉函数；
2. 更有组织性地操纵DOM；
3. 从/到UI的数据整顿起来；（组织更好）
4. 不必为写逻辑先写N多废话。