AngularJS自定義組件開發(fā),.,主要內容,第一部分：什么是AngularJs? 第二部分：五大特性 第三部分：簡單的例子 第四部分：模塊化 第五部分：指令 第六部分：AngularJS的優(yōu)勢與缺點,.,什么是AngularJS,AngularJS是協(xié)助搭建單頁面工程的開源前端框架。它通過MVC模式使得開發(fā)與測試變得更容易。 AngularJS試圖成為WEB應用中的一種端對端的解決方案。它將指導開發(fā)整個應用。 AngularJS于2009年發(fā)布第一個版本，由Google進行維護，壓縮版94k。,.,AngularJS五大特性,雙向數(shù)據(jù)綁定 -實現(xiàn)了把model與view完全綁定在一起，model變化，view也變化，反之亦然。MVC -吸收了傳統(tǒng)的MVC設計模式針但又并不執(zhí)行傳統(tǒng)意義上的MVC，更接近于MVVM(Moodel-View-ViewModel)。模板-在AngularJS中，模板相當于HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當做DOM來操作，去生成一些指令來完成對view的數(shù)據(jù)綁定。指令-可以用來創(chuàng)建自定義的標簽，也可以用來裝飾元素或者操作DOM屬性。依賴注入-AngularJS擁有內建的依賴注入子系統(tǒng)，可以幫助開發(fā)人員更容易的開發(fā)，理解和測試應用。,.,AngularJs的核心思想,UI視圖,數(shù)據(jù)模型,視圖、數(shù)據(jù)雙向更新,這個過程由AngularJs自動進行開發(fā)者無需關注,在AngularJS中通過數(shù)據(jù)視圖雙向綁定實現(xiàn)。,.,AngularJs的核心思想,遵循MVC模式開發(fā)。,.,如何使用,.,簡單的例子-編寫html, 按名字排序 按年齡排序 phone.snippet phone.age ,ng-app：AngularJS程序入口，對該標簽內的元素進行初始化。ng-controller：在當前元素范圍內綁定指定的控制器(controller)。ng-model：指定當前元素與數(shù)據(jù)模型（$scope）中的屬性綁定，如果數(shù)據(jù)模型中沒有此屬性，會自動新建一個。ng-repeat：循環(huán)$scope中的屬性，類似于#each beansxxx：花括號表示讀取某一屬性值filter、orderBy：過濾器。filter可以根據(jù)指定的屬性過濾數(shù)據(jù)(例子里是quer屬性)。orderBy是排序過濾器。這兩個過濾器都是內置的。過濾器是可自定義的。,.,簡單的例子-編寫控制器,var PhoneListCtrl = $scope, $http, function($scope, $http) $http.get(./json/test-1.json) .success(function(data) $scope.phones = data; ); $scope.sortType = age; ;,PhoneListCtrl 控制器。控制器的聲明方式是 var c1=ser1,ser2,functionc1是控制器的名字，ser1、ser2是控制器所依賴的服務，以聲明的方式注入到控制器中。例子中注入了$scope(數(shù)據(jù)模型)、$http(封裝了ajax的服務)。這兩個服務都是angularjs內置服務，服務是可以自定義的。$scope.phones = data; 在這個地方后臺返回的數(shù)據(jù)應用到了數(shù)據(jù)模型中，這時前臺UI會自動響應更新。,.,模塊化, name | test var myAppModule = angular.module(myApp,); myAppModule.filter(test,function() return function(name) return hello, +name+!; ; ); myAppModule.controller(myAppCtrl,$scope,function($scope) $=xingoo; ); ,首先，通過全局變量angular創(chuàng)建模塊myAppModule 第一個參數(shù)是綁定的應用app名稱，這個app標識了頁面中angular的入口點，類似main函數(shù)的作用。第二個參數(shù)里面標識了依賴的模塊。模塊化作用： 1 增加了模塊的可重用性2 通過定義模塊，實現(xiàn)加載順序的自定義3 在單元測試中，不必加載所有的內容,.,var PhoneListCtrl = $scope, $http, function($scope, $http) $http.get(./json/test-1.json) .success(function(data) $scope.phones = data; ); $scope.sortType = age; ;,PhoneListCtrl 控制器?？刂破鞯穆暶鞣绞绞?var c1=ser1,ser2,functionc1是控制器的名字，ser1、ser2是控制器所依賴的服務，以聲明的方式注入到控制器中。例子中注入了$scope(數(shù)據(jù)模型)、$http(封裝了ajax的服務)。這兩個服務都是angularjs內置服務，服務是可以自定義的。$scope.phones = data; 在這個地方后臺返回的數(shù)據(jù)應用到了數(shù)據(jù)模型中，這時前臺UI會自動響應更新。,.,AngularJS 指令,AngularJS有一套完整的、可擴展的、用來幫助web應用開發(fā)的指令集，它使得HTML可以轉變成“特定領域語言(Domain Specific Language，簡稱DSL)”，是用來擴展瀏覽器能力的技術之一，在DOM編譯期間，和HTML關聯(lián)著的指令會被檢測到，并且被執(zhí)行，這使得指令可以為DOM指定行為，或者改變它。AngularJS通過稱為指令的新屬性來擴展的HTML，帶有前綴ng-，我們也可以稱之為“指令屬性”，它就是綁定在DOM元素上的函數(shù)，可以調用方法、定義行為、綁定controller及$scope對象、操作DOM，等等。,例如：ng-app ng-controller ng-src xxx ng-repeat ng-model 等,.,AngularJS 指令,myAppModule.directive(xingoo,function() return restrict:AECM, template:hello my directive, repalce:true );,一般指令的寫法：,1 restrict：定義了標簽的使用方法，一共四種，分別是AECM2 template：定義標簽的模板。里面是用于替換自定義標簽的字符串3 repalce：是否支持替換4 transclude：是否支持內嵌,.,如何使用指令,A attribute屬性：當做屬性來使用 eg： E element元素：當做標簽元素來使用 eg： C class類：當做CSS樣式來使用 eg： M comments注釋：當做注釋使用（這種方式在1.2版本下親測不可用?。?eg： 注：一般來說推薦，當做屬性和元素來使用。當想要在現(xiàn)有的html標簽上擴展屬性時，采用屬性的方式。當想要自定義標簽時，采用標簽的形式。想要使用那種方式，必須要在定義directive中的restrict里 面 聲明對應的字母。,.,指令內嵌使用,使用transclude屬性，設置為true。 并使用ng-transclude屬性，定義內部嵌套的位置。transclude的作用可以簡化地理解成：把標簽替換成我們所編寫的HTML模板，但是標簽內部的內容保持不變。,.,如何使用指令,link，添加相應事件，方法中有三個參