angularJS學習手冊（1）

歡迎來到augularJS的學習

1、什麼是angularJS？

angular的英文意思是角，爲何要叫angular我也不知道。

AngularJS是一個MV*（Model-View-Whatever，不論是MVC或者MVVM，統歸MDV(model Drive View)）JavaScript框架，其是Google推出的SPA（single-page-application）應用框架，其爲咱們的web應用開發增長很多魔法變換。將讓你的開發很是爽。AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。

沒錯他是個框架，那jquery是個什麼呢？

jquery是個類庫。angularJS 和Jquery都是用JS寫的。

框架和類庫的區別在哪兒？

舉個例子：你須要建一個游泳池。游泳池的工程圖就是一個框架，建造游泳池用到的挖掘機就是一個類庫。

2、angularJS能作什麼？

簡單來講就是方便你開發web應用（等於沒說）。

angularJS主要是用於CRUD的web應用，而像如遊戲，圖形界面編輯器這些web應用就沒有必要使用angularJS

3、使用angularJS須要具有哪些知識？

W3school裏面的大部分知識都得具有。

最好有開發過web網站的經驗，知道平時開發web應用的麻煩之處，才能體會用angularJS避免這些麻煩的快感~~。

固然，相似angularJS的框架有不少，但基本點理念都是相同的，對其餘前端框架有了解的話，學起angularJS會很快速。（好比 node.js【這不是一個框架，而是一個能讓JavaScrit運行在服務器上的平臺，】，React【一個用於建立用戶界面的 JavaScript 庫】）

4、angularJS的理念（可不看）

 

Angular信奉的是，當組建視圖(UI)同時又要寫軟件邏輯時，聲明式的代碼會比命令式的代碼好得多，儘管命令式的代碼很是適合用來表述業務邏輯。

 

將DOM操做和應用邏輯解耦是一種很是好的思路，它能大大改善代碼的可調性；

 

將測試和開發同等看待是一種很是很是好的思路，測試的難度在很大程度上取決於代碼的結構；

 

將客戶端和服務器端解耦是一種特別好的作法，它能使兩邊並行開發，而且使兩邊代碼都能實現重用；

 

若是框架可以在整個開發流程裏都引導着開發者：從設計UI，到編寫業務邏輯，再到測試，那對開發者將是極大的幫助；

 

「化繁爲簡，化簡爲零」老是好的。

 

AngularJS能將你從如下的噩夢中解脫出來：

 

使用回調：回調的使用會打亂你的代碼的可讀性，讓你的代碼變得支離破碎，很難看清原本的業務邏輯。移除一些常見的代碼，例如回調，是件好事。大幅度地減小你由於JavaScript這門語言的設計而不得不寫的代碼，能讓你把本身應用的邏輯看得更清楚。

 

手動編寫操做DOM元素的代碼：操做DOM是AJAX應用很基礎的一部分，但它也老是很「笨重」而且容易出錯。用聲明的方式描述的UI界面可隨着應用狀態的改變而變化，能讓你從編寫低級的DOM操做代碼中解脫出來。絕大部分用AngularJS寫的應用裏，開發者都不用再本身去寫操做DOM的代碼，不過若是你想的話仍是能夠去寫。

 

對UI界面讀寫數據：AJAX應用的很大一部是CRUD操做。一個經典的流程是把服務端的數據組建成內部對象，再把對象編成HTML表單，用戶修改表單後再驗證表單，若是有錯再顯示錯誤，而後將數據從新組建成內部對象，再返回給服務器。這個流程裏有太多太多要重複寫的代碼，使得代碼看起來老是在描述應用的所有執行流程，而不是具體的業務邏輯和業務細節。

 

開始前得寫大量的基礎性的代碼：一般你須要寫不少的基礎性的代碼才能實現一個「Hello World」的應用。用AngularJS的話，它會提供一些服務讓你很容易地正式開始寫你的應用，而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是，你還能全盤掌握自動化測試的初始化過程。

5、AngularJS的優缺點

優勢：
1. 模板功能強大豐富，而且是聲明式的，自帶了豐富的Angular指令；
2. 是一個比較完善的前端MV*框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等全部功能；
3. 自定義Directive，比jQuery插件還靈活，可是須要深刻了解Directive的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，咱們能夠經過閱讀源代碼來找到某些咱們須要的東西，如：在directive使用 $parse；
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），可以很容易的寫出可複用的代碼，對於敏捷開發的團隊來講很是有幫助，咱們的項目從上線到目前，UI變化很大，在摸索中迭代產品，可是js的代碼基本上不多改動。
5. 補充：Angular支持單元測試和e2e-testing。

缺點：
1. 驗證功能錯誤信息顯示比較薄弱，須要寫不少模板標籤，沒有jQuery Validate方便，因此咱們本身封裝了驗證的錯誤信息提示，詳細參考 why520crazy/w5c-validator-angular · GitHub ；
2. ngView只能有一個，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub 解決，可是貌似ui-router 對於URL的控制不是很靈活，必須是嵌套式的（也許我沒有深刻了解或者新版本有改進）；
3. 對於特別複雜的應用場景，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器，不知道是內存泄漏了仍是什麼其餘問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中；
4. 此次從1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美兼容低版本，升級以後可能會致使一個兼容性的BUG，具體詳細信息參考官方文檔 AngularJS ，對應的中文版本：Angular 1.0到1.2 遷移指南
5. ng提倡在控制器裏面不要有操做DOM的代碼，對於一些jQuery 插件的使用，若是想不破壞代碼的整潔性，須要寫一些directive去封裝插件，可是如今有不少插件的版本已經支持Angular了，如：jQuery File Upload Demo
6. Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本，固然1.2.X後，Angular也在作一些更改，好比把route，animate等模塊獨立出去，讓用戶本身去選擇。

固然使用的人多才會暴露更多的問題，一塊兒爲這些問題尋找解決方案是一個社區的良性趨勢，選擇Angular，的確使咱們的開發效率大大提升。

做者：徐海峯
連接：https://www.zhihu.com/question/22284218/answer/20893162
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。