AngularJS篇 1.AngularJS不入門

提前說好，本篇只適合初學者，很基礎。甚至很多詞都解釋的不專業，勿噴。

引言

在寫這個系列的時候，心中是有點糾結的。因為Angular截至目前，已經出到5了，而我們寫的卻是1。不得不思考這個已經註定要被淘汰的版本還有沒有必要去講或者說去學習。經過一番思考，我還是決定寫幾篇，帶大家認識一下這個曾經非常輝煌的Angular1。

為什麼呢？說到底還是市場決定的，雖然Angular從2.0開始發生了巨大的變革，但還是有很大一部分公司還在用的，比如在南京，有好多的公司還在大量依賴JQuery，大家習慣了ES5的寫法，直接變更到ES6或者TypeScript其實是很難的。

二三線城市，還是求穩。

所以，在近幾年，Angular1還是普通軟體公司的主流。我們不妨簡單的學習一下。

有同學可能會想，現在我們學Angular1，學完之後再學Angular2，後面豈不是每個版本都要花好大力氣去學習？

其實不必擔心，大幅度變更只存在於1和2之間，從2之後，沒有3，直接是4和5，而4/5都是在2的基礎上做補充的，所以學習成本是遠遠沒有那麼高的。不會像1到2改的那麼變態。

按照市面上的習慣，Angular1.x統稱AngularJS，Angular2之後就統一簡稱為Angular了。 大家不要混淆。

Angular是谷歌開發的並且開源的，大廠出品，值得信賴。

OK,廢話到此結束。下面我們開始正文。

正文

首先，Angular是啥？廢話，就是個JS框架唄。 其次，Angular有啥好處？和JQuery有啥區別嗎？

顯然是有的，JQuery主要的優勢是對DOM操作和AJAX進行封裝，我們過去的傳統項目一直是DOM驅動業務邏輯。這顯然是很耦合的，回想一下是不是這樣的，假設我們要刪除一行數據，首先要獲取到刪除按鈕上綁定的id（$().attr("id")）,然後ajax發送到後台刪除，最後刪除標籤($().remove())。

總而言之，邏輯和數據都非常的依賴於DOM依賴於標籤。

那在AngularJS當中數據是怎麼與頁面交互的呢？我們來看一下。 (其實有Vue基礎的人看這個會覺得很熟悉，因為在語法表現上看，真的很相似。)

效果如下：

當我們在文本框輸入內容時，h1中的內容也會隨之跟著變化，不需要其他任何代碼。 試想一下，如果用JS或者JQ來實現這功能，需要寫多少代碼。

無聊重複的取值賦值、事件綁定，想想都煩。

OK。一個例子已經勝過很多廢話。我們開始進入ng大門吧。為了方便以後AngularJS我們就簡寫為ng吧。

下面我們來分析一下這段代碼，解釋一下是啥意思。 首先不用說你也知道，我們引入了ng的庫源文件，但並沒有下載到本地，現在我們的習慣用官方提供的CDN，直接指向公網的地址。如果你不喜歡，那還是可以下載到本地，然後引用。

然後我們使用ng-app指令，指定了一個ng的容器，告訴瀏覽器，這段html被我接管了。以後要先等我處理完，再渲染。 通常開發時大家常把ng-app放在html標籤上，這樣整個頁面就被ng控制了。

接下來，通過ng-model指令將input的value綁定到變數test，然後使用表達式把內容輸出頁面上。

那麼為啥input的value改變時，h1的內容也跟著改變呢

這是因為ng內部有個叫「雙向綁定」的機制：大概意思就是如果視圖改變來某個變數值，她會使用事件循環來「臟檢查」檢測特定全局變數的變化並發出事件以響應變化。如果變數改了，視圖也會根據變化重新渲染。

如果要深入了解，大家可以自行去查閱資料，這裡就不再贅述了。

暫時我們的目標就是能上手框架就行啦，原理之類的東西，等以後想進階來再說吧。

使用

OK，我們看下。首先我們使用ng-app指定作用域。一般ng-app寫在html標籤上。

這時候瀏覽器就有數了，整個html被接管了，要等ng解析完了才能渲染出來。

然後我們之前學Vue時也有數，一個頁面應該是可以被分成多個部分的。要不然就會造成代碼很臃腫而且容易造成變數污染啥的。

ng中也有對應機制，叫模塊。我們會給作用域起個名字，而且聲明對應的模塊。

我們可以把模塊看成是C#的命名空間或者Java中的包。顯然我們還需要類這種東西，在MVC結構中被稱為controller。 變數方法之類的都寫在controller中。

controller可以簡寫成ctrl。 在html中也需要指定地盤，這塊被我這個控制器接管了。

效果：

注意給homeCtrl起個別名，要不然並不會出現你想要的效果。

$Scope

剛才的方式，變數是controller特有的，無法在別的控制器中使用。但有些時候我們希望有全局變數，大家都能共享咋辦呢？使用$scope對象來存即可。

注意，$scope可不是個形參，沒有辦法像之前普通function那樣可以改成fuck啥的，名字不能變。但注意這並不是真的全局變數。比她更厲害的有個$rootScope，作用域更高，但顯然我們不應該把內容掛載幾乎是全局變數的$rootScope上面。

循環綁定

我們當初學習Vue的時候，更多的是被列表綁定的便捷驚艷到。在ng中你會發現，也很熟悉。

效果：

這樣就綁定了列表。但我們一般會有個a鏈接跳轉。比如商品列表等等，是要綁定ID的。在Vue中是這種形式。但ng就不需要這麼麻煩。

效果：

事件

我們之前Vue還用過各種事件，比如點擊。Vue中是v-on:click，在ng中呢？

這樣就OK了。我們可以使用之前學過的數組高級語法來做刪除。

這時候點擊就可以刪除了。這裡的filter就不用我解釋了吧？可以看我JS第一章。

ajax

上面我們一直寫個靜態數組，但事實上在正常的項目中我們都是通過ajax從資料庫中獲取數據。在ng中也自己封裝了js的ajax。我們來看下。 假設現在有個json文件：

但你發現沒卵用，因為跟jq.ajax一樣，this指向出問題了。所以我們要跟當初學閉包一樣，用變數替代this。

過濾器

當我們面對性別/類型等可以用0,1,2,3來表示的欄位時，往往會三元表達式來寫。但顯然過濾器是更好的選擇。 現在我們做個小小的demo，給所有的名字後面加個SB。

效果：

最後拋出個問題，我們現在代碼都寫在controller中，當頁面越來越複雜，controller勢必也會變臃腫。我們在別的語言中，一般會怎麼處理？分層！對我們這裡也要分層。MVC嘛，自然會有個Model層。我們再下一章會講到。

好了，我覺得真的沒必要花那麼多精力學AngularJS的使用。畢竟已經是被宣布淘汰而且不再更新的東西了。注意我說的是使用，不是原理。

對於初學者而言，我們能用起來寫寫簡單項目就OK了。比如列表綁定等等。學生都覺得雙向綁定最大的好處就行，刪除和新增時，列表自動動態更新了，不需要自己用JQuery操作DOM了。

踏踏實實先寫，不要好高騖遠，Vue2等等都用ES6語法了，還是有門檻。等我們寫幾個項目之後，自然會發現，吊了，目前學的不足以我使用了，我得學習新東西了，然後再來學習。這才是正道。要不然既學1又學2，很容易混掉。

其實Angular和Vue以及React功能上都一樣，都有路由、組件、模塊。通信等等。這幾天我在想，對我而言，花時間學習幾大框架的使用，是沒有意義的。

所以我打算快速的寫完Angular1、Vue1，React1的基礎使用，每個三篇其實就夠了。 畢竟只是基礎使用嘛，對於0基礎初學者或者後台開發人員來說，足夠了。

2018年我將會把精力更多的投入到JQuery源碼，ECMAScript，MVVM框架的設計與實現。

最後依然是軟廣：

2018，有朋友想學編程的，請聯繫我。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！