AngularJS快速入門

標籤：js

 650) this.width=650;" src="http://images2015.cnblogs.com/blog/636325/201704/636325-20170412123508158-766265493.png" style="margin:0px;padding:0px;border:0px;" />

AngularJS誕生於2009，被用在很多我們熟知的Google應用，例如Gmail、Maps，它主要致力於快捷的構建AJAX應用，在樣本庫在Github的地址為：https://github.com/shyamseshadri/angularjs-book。

其最基本的幾個概念如下所示：

1. 用戶端模板：在我們過去使用的多頁應用程式中，我們將html和資料裝配混合起來產生頁面後發送到瀏覽器，而單頁面的AJAX應用則是將html模板和資料都直接發送給瀏覽器，由用戶端裝配。

2. MVC，概念在所有的Web應用中基本上都使用到。

3. 資料繫結，支援雙向繫結，其實也就是觀察者模式的實現，非常的方便。

4. 依賴注入，通過$scope, $location等內建對象，使得我們只需關心實際需求，而不關心其依賴，遵循了迪米特法則（最少知識原則，Law_of_Demeter）。

5. 指令，架構提供了很多指令，對html和Dom進行擴充，例如ng-controller指定控制器視圖的某一部分，ng-model用於將輸入資料繫結到模型屬性。

一個簡單例子如下，主要注意的是，很多地方的入門demo會省略ng-app後面的參數，Angular的Controller形式，以及相關模組的綁定等，瀏覽器肯能會報錯，初學需要小心。此外，VS關於AngularJS的智能感知外掛程式的下載和使用也是一個常見問題。

650) this.width=650;" id="code_img_closed_9a1fcc03-c356-4281-99d0-814652682af1" class="code_img_closed" src="/img/jia.gif" style="margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle;" /> View Code

在上例中，我們可以看到通過ng-app聲明邊界，即告訴架構哪一部分受其管理，以上為div元素；{{greeting.text}}的雙括弧插值文法，以及相同功能的ng-bind，推薦後者；ng-app命名空間的使用，控制angular架構的有效範圍，這樣可以很好的與遺留程式相容；ng-repeat迭代資料；ng-model綁定資料，這是個雙向繫結，View中的修改會影響到model，之後會有表單輸入的例子再次強化這個概念；ng-click綁定單擊事件處理函數。

大體來說，Angular程式一次請求的流程：使用者請求應用起始頁；瀏覽器向伺服器發起http串連，載入index.html模板頁面；Angular被載入到頁面中，等待頁面載入完成，然後尋找ng-app指令，用於定義模板邊界；之後Augular遍曆模板，尋找指令和綁定關係，觸發註冊監聽器、執行DOM操作、擷取伺服器初始化資料；最後串連伺服器請求其他資料(Ajax)。這種模板和資料完全分離的方式，非常適合瀏覽器快取資料，提升應用效能。

• 表單輸入

在架構中使用表單元素非常簡單，可以通過ng-model將表單元素繫結到模型屬性上，達到雙向繫結的目的，這部分和.NET中的資料繫結效果一致；在表單提交時，ng-submit會自動阻止瀏覽器預設的POST操作；$watch可以監視Model中具體的屬性和欄位，而ng-change主要用來檢視表單元素；ng-show和ng-hide用於顯隱元素，在菜單情境下應用廣泛

650) this.width=650;" id="code_img_closed_0436a019-6bf5-43fa-96b2-970d53f9d38f" class="code_img_closed" src="/img/jia.gif" style="margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle;" /> View Code

Tip:

相信大家接觸非侵入式javascript概念已經很久了吧，但通過以上例子，我們會發現angularJS的使用並沒有這樣做，而是將html模板和相關控制碼混寫了，這難道是說該架構並不合理。其實不然，之前提取非侵入式的概念也是因為當時前端開發的痛點：不同瀏覽器對js的支援不同，運行方式也不同；事件處理器都引用全域命名空間的函數，在整合時存在命名衝突；事件監聽器綁定資料結構和行為，難以維護。但對於JS來說，它通過架構自身解決相容性問題，通過命名空間解決整合的問題，最後一點也是最重要的一點，所有的事件處理函數並不引用任何的DOM元素和事件。

 

650) this.width=650;" src="http://images2015.cnblogs.com/blog/636325/201705/636325-20170511160046176-1116700040.png" style="margin:0px;padding:0px;border:0px;" />

模組、控制器和資料繫結：無相依模組angular.module(‘firstModule‘, [])

Scope和Event：scope是內建對象，主要用於處理資料模型，作用範圍和頁面聲明的範圍一致$scope.greeting=‘Hello‘, {{greeting}}，當使用範圍不同時，需要通訊，就需要藉助Event，範例程式碼如下所示。

$.scope.$emit(‘event_emit‘, ‘message‘);//子scope發送$.scope.$on(‘event_emit‘, function(event, data){});//父scope接受$.scope.$broadcast(‘event_broad‘, ‘message‘);//父scope發送$.scope.$on(‘event_broad‘, function(event, data){});//子scope接受

多視圖和路由：需要引入angular-route.js

650) this.width=650;" id="code_img_closed_3cdb814d-344a-41dc-b61d-1ce59a520687" class="code_img_closed" src="/img/jia.gif" style="margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle;" /> View Code

依賴注入: angular.module(‘firstModule‘).controller(‘diController‘, [‘$scope‘,function($scope){}]);

Service和Factory:Angular內建類$location, $timeout, $rootScope等服務，同時可以自己提供額外的服務，方式有兩種，Service使用時需要new,而Factory不需要。

650) this.width=650;" id="code_img_closed_f65b5cd1-664c-49f4-ac2b-4613f8abf2e7" class="code_img_closed" src="/img/jia.gif" style="margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle;" /> View Code

http操作：支援ajax操作，包括$http.get(url), $http.post(url, data), $http.put(url, data), $http.delete(url), $http.head(url)。

自訂指令：內建了很多指令，如ng-repeat, ng-show, ng-model等，可以使用一個簡短的指令實現一個前端組件，如<date-picker></date-picker>，<input type="text" class="date-picker" />。

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />

        angular.module(‘myApp‘, []).directive(‘helloWorld‘, function() {            return {                restrict : ‘AE‘,                replace : true,                template : ‘<h3>Hello, World!</h3>‘            };        });

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />

Demo: https://github.com/wanliwang/cayman/tree/master/cm-angularweb 

AngularJS快速入門