|
粗略地翻了一遍《JavaScript DOM編程藝術(shù)》,，就以為可以接過AngularJS的一招半式，一個星期過去了,，我發(fā)現(xiàn)自己還是Too Young,，Too Simple！（剛打照面的時候,，我就被亂棍砸暈了-_-!） 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架,、模板以及數(shù)據(jù)綁定和豐富UI組件。它支持整個開發(fā)進(jìn)程,，提供web應(yīng)用的架構(gòu),，無需進(jìn)行手工DOM操作。 AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的,。HTML是一門很好的為靜態(tài)文本展示設(shè)計的聲明式語言,，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。這里AngularJS就應(yīng)運(yùn)而生,，彌補(bǔ)了HTML的天然缺陷,，用于構(gòu)件Web應(yīng)用等。 2.如何了解AngularJS AngularJS誕生于2009年,由Misko Hevery 等人創(chuàng)建,后為Google所收購,。 AngularJS官網(wǎng) ： http://www. （一般來說會被墻掉,，所以可以訪問下面的網(wǎng)站） AngularJS中文網(wǎng)站 ： http://www. 書籍 ：《AngularJS 權(quán)威教程》《用AngularJS開發(fā)下一代Web應(yīng)用》等。個人意見,，F(xiàn)or your information 備注 ：視頻教程,，最近有看過大漠老師的AngularJS教程，覺得還不錯,，但是感覺沒有一點(diǎn)基礎(chǔ)還是聽不懂的,，或者要看好幾遍（不是做廣告） 3.為什么要了解AngularJS 一項新技術(shù)能夠面世，為眾人所知,，從而脫引而出,，定然不是空穴來風(fēng)，肯定有其標(biāo)新立異的過人之處,，主要有以下幾點(diǎn)： （1）MVC的思想（或者是MVVM） （2）模塊化和依賴注入 （3）雙向數(shù)據(jù)綁定 （4）指令 每一個特性都可以大篇幅的展開,，顯然，目前能力不夠,，沒法展開,，有興趣可以網(wǎng)上搜下，大體了解。 今天主要來說說AngularJS的三個指令“ @ ”,，“ = ”,，“ & ”的用法和區(qū)別（這個問題困擾了我大半天，和Frank交流多次,，我才明白） 1.指令作用域中的@ 作用是把當(dāng)前屬性作為字符串傳遞,。 先上代碼，前臺界面： 1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="../css/bootstrap.css"> 6 </head> 7 <body> 8 <div ng-controller="MyCtrl"> 9 <drink water="{{pureWater}}"></drink> 10 </div> 11 </body> 12 <script src="../js/angular.js"> 13 <script src="ScopeAt.js"></script> 14 </html> JS代碼： 1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.pureWater="純凈水"; 4 }]) 5 myModule.directive("drink", function() { 6 return { 7 restrict:'AE', 8 scope:{ 9 water:'@' 10 }, 11 template:"<div>{{water}}</div>" 12 } 13 }); 執(zhí)行的結(jié)果平淡無奇,，卻暗藏玄機(jī)： （1） HTML頁面中,，聲明一個標(biāo)簽<drink></drink>，其中定義一個屬性名：water 屬性值：pureWater（這里的{{}}是angularjs的一種常見表達(dá)式,，類似于ng-model,，用于值綁定） （2） JS文件中，首先從模塊開始,，然后創(chuàng)建一個控制器行2~行4,，再定義一個指令，主要實(shí)現(xiàn)的是將"<drink></drink>"替換為"<div>{{water}}</div>"標(biāo)簽顯示 （3） 重點(diǎn)介紹這里的 scope:{
water:'@'
}
該表達(dá)式等價于： link:function(scope,element,attrs){
scope.water=attrs.water;
}
具體含義就是在指令的scope上定義一個屬性名：water,，它的值就是前臺界面中water屬性的值,，也就是"{{pureWater}}"; 同時{{pureWater}}的值我們從聲明的控制器可以看出： $scope.pureWater="純凈水"; 所以最終頁面顯示的是“純凈水”，主要的流程就是： a.在指令中,，通過@實(shí)現(xiàn)指令與HTML頁面元素關(guān)聯(lián); b.在控制器中又實(shí)現(xiàn)了與頁面的聯(lián)系; c.從而借助HTML頁面建立起控制器與指令的聯(lián)系,，也是一種通訊方式。 具體見下圖： 2.指令作用域中的= 作用是與父scope中的屬性進(jìn)行雙向綁定,。
1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="../css/bootstrap.css"> 6 </head> 7 <body> 8 <div ng-controller="MyCtrl"> 9 Ctrl: 10 <br> 11 <input type="text" ng-model="pureWater"> 12 <br> 13 Directive: 14 <br> 15 <drink water="pureWater"></drink> 16 </div> 17 </body> 18 <script src="../js/angular.js"></script> 19 <script src="ScopeEqual.js"></script> 20 </html> 1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.pureWater="純凈水"; 4 }]) 5 myModule.directive("drink", function() { 6 return { 7 restrict:'AE', 8 scope:{ 9 water:'=' 10 }, 11 template:'<input type="text" ng-model="water"/>' 12 } 13 }); 這里=的手段類似,，通過頁面設(shè)置兩個輸入框，分別代表指令和控制器的作用域,，在JS代碼實(shí)現(xiàn)了雙向綁定,，做到了控制器與指令在各自作用域內(nèi)能夠影響對方，也就是雙向通信,，具體思路與@類似,，不贅述，上圖： 3.指令作用域中的& 主要作用是傳遞一個來自父scope的函數(shù),，稍后調(diào)用,。 1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="../css/bootstrap.css"> 6 </head> 7 <body> 8 <div ng-controller="MyCtrl"> 9 <greeting greet="sayHello(name)"></greeting> 10 <greeting greet="sayHello(name)"></greeting> 11 <greeting greet="sayHello(name)"></greeting> 12 </div> 13 </body> 14 <script src="../js/angular.js"></script> 15 <script src="ScopeAnd.js"></script> 16 </html> 1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.sayHello=function(name){ 4 alert("Hello "+name); 5 } 6 }]) 7 myModule.directive("greeting", function() { 8 return { 9 restrict:'AE', 10 scope:{ 11 greet:'&' 12 }, 13 template:'<input type="text" ng-model="userName" /><br/>'+ 14 '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>' 15 } 16 }); 從頁面可以看出，這里定義了一個標(biāo)簽<greeting></greeting>,，并在其中定義了屬性名greet,，與上面的@以及=不同的是，屬性名后面是一個方法,，所以,，這里的&主要用于在Controller和directive之間傳遞函數(shù),，實(shí)現(xiàn)兩者之間的函數(shù)通信，在JS中,，將前臺的greeting標(biāo)簽替換為template中的內(nèi)容,，一個輸入框加上一個按鈕，按鈕上綁定了greet函數(shù),，與前臺頁面的greet相呼應(yīng),，而前臺的greet函數(shù)在控制器中有定義，所以指令中也是調(diào)用的控制器中的greet函數(shù),。執(zhí)行結(jié)果如下： （1）初始界面 
（2）在第一個文本框填值 （2）在第二個文本框填值 （3）在第三個文本框填值 |
|
|
來自： tingx > 《angular1》
