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