01_Introduction介绍

What Is Angular?

什么是Angular?

AngularJS is a structural framework fordynamic web apps. It lets you use HTML as your template language and lets youextend HTML's syntax to express your application's components clearly andsuccinctly. Angular's data binding and dependency injection eliminate much ofthe code you would otherwise have to write. And it all happens within thebrowser, making it an ideal partner with any server technology.

AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地表达你的应用程序的组件。Angular的数据绑定和依赖注入,是你不用再写大量的代码。这些都发生在浏览器端,这使得它能够和任何服务端技术成为合作伙伴。

 

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

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要它不包含太多创建应用程序的方法,其结果是构建web应用程序是一种练习,这种练习是我视图去“欺骗”浏览器去做我想做的事情。

 

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

通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:

  • 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.

类库 - 类库是一些函数的集合,它对于你写WEB应用很有帮助。起主导作用的是你的代码,由你来决定何时使用类库。类库有: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. E.g., durandal, ember, etc.

框架 - 框架是一种特定实现的WEB应用,你的代码填充具体的业务逻辑。框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:durandal, ember等。

 

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

AngularJS采用了另外一种方法。它通过创造新的HTML结构,尝试去减少在以文档为中心的HTML和一个应用程序的需求两者之间的不匹配。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:

  • Data binding, as in {{}}.使用双大括号{{}}语法进行数据绑定;
  • DOM control structures for repeating/hiding DOM fragments. 使用DOM控制结构来实现迭代或者隐藏DOM片段;
  • Support for forms and form validation. 支持表单和表单的验证;
  • Attaching new behavior to DOM elements, such as DOM event handling. 附着新的行为在DOM元素上,例如DOM事件处理。
  • Grouping of HTML into reusable components. 能将HTML分组成可重用的组件。

 

Acomplete client-side solution

一个完整的客户端解决方案

Angular is not a single piece in theoverall puzzle of building the client-side of a web application. It handles allof the DOM and AJAX glue code you once wrote by hand and puts it in a well-definedstructure. This makes Angular opinionated about how a CRUD application shouldbe built. But while it is opinionated, it also tries to make sure that itsopinion is just a starting point you can easily change. Angular comes with thefollowing out-of-the-box:

Angular并不是构建客户端应用程序的这块拼图中的一片。它可以处理所有的你曾经亲手写过的DOM和AJAX的粘合代码,并把它定义在一个良好的结构中。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很“固执”(原文为opinionated,意指没有太多的其他方式)。但是,尽管它很“固执”,它仍然能确保它的“固执”只是在你构建应用的起点,并且你仍能灵活变动。AngularJS的一些出众之处如下

 

  • 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.

构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入。

  • Testability story: unit-testing, end-to-end testing, mocks, test harnesses.

测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。

  • Seed application with directory layout and test scripts as a starting point.

具有目录布局和测试脚本的种子应用作为起点。

 

AngularSweet Spot

AngularJS的可爱之处

Angular simplifies application developmentby presenting a higher level of abstraction to the developer. Like anyabstraction, it comes at a cost of flexibility. In other words not every app isa good fit for Angular. Angular was built with the CRUD application in mind.Luckily CRUD applications represent the majority of web applications. Tounderstand what Angular is good at, though, it helps to understand when an appis not a good fit for Angular.

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会牺牲一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,CRUD应用占web应用程序的大多数。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。

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

如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

 

TheZen of Angular

AngularJS的“禅道(理念)”

Angular is built around the belief thatdeclarative code is better than imperative when it comes to building UIs andwiring software components together, while imperative code is excellent forexpressing 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操作和应用逻辑解耦是一种非常好的思路,它能大大改善代码的可调性;

  • 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 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 pains:

AngularJS能将你从以下的噩梦中解脱出来:

  • 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 codingyou 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.

手动编写操作DOM元素的代码:操作DOM是AJAX应用很基础的一部分,但它也总是很“笨重”并且容易出错。用声明的方式描述的UI界面可随着应用状态的改变而变化,能让你从编写低级的DOM操作代码中解脱出来。绝大部分用AngularJS写的应用里,开发者都不用再自己去写操作DOM的代码,不过如果你想的话还是可以去写。

  • 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.

对UI界面读写数据: AJAX应用的很大一部分是CRUD操作。一个经典的流程是把服务端的数据组建成内部对象,再把对象编成HTML表单,用户修改表单后再验证表单,如果有错再显示错误,然后将数据重新组建成内部模型,再返回给服务器,这个流程里有太多要重复写的代码。Angularjs几乎消除所有这些重复代码,余下的代码看起来总是在描述应用的全部执行流程,而不是具体的业务逻辑和业务细节。

  • 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”的应用。用AngularJS的话,它会提供一些服务让你很容易地正式开始写你的应用,而这些服务都是以一种Guice-like dependency-injection式的依赖注入自动加入到你的应用中去的,这让你能很快的进入你应用的具体开发。特别的是,你还能全盘掌握自动化测试的初始化过程。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章