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式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是,你還能全盤掌握自動化測試的初始化過程。

 

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