本篇文章為大家展示了如何借助AngularJS寫(xiě)優(yōu)雅的代碼，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到成華網(wǎng)站設(shè)計(jì)與成華網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋成華地區(qū)。

接觸AngularJS還真有點(diǎn)碰巧，在用JQuery寫(xiě)數(shù)據(jù)綁定的時(shí)候，我被數(shù)據(jù)對(duì)象和DOM之間的同步整煩了，要寫(xiě)一大堆方法綁定和取值/設(shè)值的代碼邏輯，丑得要死。簡(jiǎn)單說(shuō)來(lái)，就是：

1. 數(shù)據(jù)對(duì)象發(fā)生變更以后，要及時(shí)更新DOM樹(shù)；

2. 用戶操作改變DOM樹(shù)以后，要回頭更新數(shù)據(jù)對(duì)象

這個(gè)問(wèn)題還是舉例來(lái)說(shuō)清楚一些，比如我定義了這樣一個(gè)queryObj：

{name: "sally", price: 30}

現(xiàn)在有這樣的DOM對(duì)象：

<input type="text" value="sally" /> <label>sally</label>

1、queryObj發(fā)生變化的時(shí)候，這兩個(gè)DOM對(duì)象要及時(shí)更新，一個(gè)是value需要更新，一個(gè)則是標(biāo)簽里面的文本需要更新。

我就得寫(xiě)這樣的JQuery設(shè)值語(yǔ)句：

$("input").val(queryObj.name);  $("label").text(queryObj.name);

2、當(dāng)用戶操作改變input里面的值的時(shí)候，我也需要同步更新label里面的值，以及queryObj里面的值：

$("input").keydown(function(){     var data = $(this).val();     $("label").text(data);     queryObj.name = data; });

可以想象在DOM對(duì)象很多的時(shí)候，這種綁定語(yǔ)句和設(shè)值語(yǔ)句惡心得令人發(fā)指。

就這個(gè)問(wèn)題，第1條對(duì)象的變更需要及時(shí)刷新到DOM上，有好多辦法，underscore.js、mustache之類的，模板+數(shù)據(jù)綁定嘛，當(dāng) 然，需要手動(dòng)調(diào)用來(lái)更新；但是反過(guò)來(lái)的第2條，DOM變更需要及時(shí)刷新到其它DOM對(duì)象上，也要刷回?cái)?shù)據(jù)對(duì)象，我找了一會(huì)兒，也沒(méi)有看見(jiàn)有什么現(xiàn)成的實(shí) 現(xiàn)，正火大地準(zhǔn)備自己寫(xiě)一個(gè)簡(jiǎn)單的機(jī)制，這時(shí)Google到了AngularJS的“two way  binding”，哈哈，暗爽，這不正是我想要的東西么？

鑒于這不是AngularJS的教程。在此我假設(shè)你有AngularJS的基礎(chǔ)知識(shí)，否則，建議你先閱讀AngularJS簡(jiǎn)單易懂的教程。

雙向綁定

不管是MVC還是MVVM，數(shù)據(jù)綁定的過(guò)程總是惹人厭煩的，這樣的事情做得越少越好；如果需要數(shù)據(jù)綁定的逆過(guò)程，這樣的問(wèn)題是現(xiàn)有MVC框架所很少考慮到的。AngularJS不但把雙向綁定的事情替我做了，而且也避免了特定視圖類的定義，直接使用原始的數(shù)據(jù)對(duì)象就好。

還是就上面這個(gè)問(wèn)題，在寫(xiě)HTML標(biāo)簽的時(shí)候，增加ng-app和一個(gè)ng-controller的屬性，至于占位符，和普通的模板機(jī)制沒(méi)有什么區(qū)別：

<div ng-app ng-controller="QueryController">     <input type="text" value="{{queryObj.name}}" />     <label>{{queryObj.name}}</label> </div>

并且定義一個(gè)和ng-controller同名的方法，參數(shù)名為$scope：

function QueryController($scope) {     $scope.queryObj = {name : "sally", price : 30}; }

完畢了，這以后label、input和$scope.queryObj這三者就同步了，DOM變化的時(shí)候，其它二者也會(huì)被及時(shí)更新。這就是AngularJS的雙向綁定。我覺(jué)得這大概是AngularJS最精華的部分。

AngularJS官網(wǎng)的教程上，還給了這樣的說(shuō)明：

從上面的例子，控制器、模板、數(shù)據(jù)模型、視圖，這幾個(gè)概念和之間的關(guān)系應(yīng)該已經(jīng)明晰了。

AngularJS遵循的設(shè)計(jì)理念，是構(gòu)建UI應(yīng)當(dāng)用聲明式的方式來(lái)（什么是聲明式編程，請(qǐng)參閱我關(guān)于編程范型的文章）。值得一提的是，AngularJS引入的directive確實(shí)方便擴(kuò)展了標(biāo)簽集，可以寫(xiě)出DSL樣子的代碼，非常非常靈活，比如：

<Alert>   <p>Error occurs.</p> </Alert>

這其中的Alert就是通過(guò)directive實(shí)現(xiàn)的自定義的標(biāo)簽，最終可以被解析成具備“警告”樣式的html，但是，在對(duì)于directive的定義上面，就連官網(wǎng)的例子都是，生寫(xiě)html片段模板代碼字符串的，用起來(lái)確實(shí)讓我不夠舒服。

依賴注入

依賴注入（Dependency Injection，DI）對(duì)于使用過(guò)Spring的程序員來(lái)說(shuō)實(shí)在是再熟悉不過(guò)了，所謂依賴注入，就是把某個(gè)過(guò)程中注入值的步驟交給外部框架、容器來(lái)完成。舉例來(lái)說(shuō)，這樣的代碼：

function PhoneListCtrl($scope, $http) {   $http.get('phones/phones.json').success(function(data) {     $scope.phones = data;   });    $scope.orderProp = 'age'; }

$scope、$http都是需要AngularJS框架傳入的服務(wù)變量，在此，參數(shù)的名字不可隨意修改，因?yàn)锳ngularJS是根據(jù)它來(lái)判定需要依賴注入的。

服務(wù)可以自己定義，再利用依賴注入的方式加進(jìn)來(lái)使用，這對(duì)于模塊化和重用是很有幫助的。

過(guò)濾器

AngularJS的表達(dá)式功能比較弱，不支持條件判斷和流程控制，不過(guò)好在支持過(guò)濾器，這就一定程度上彌補(bǔ)了這個(gè)缺憾。過(guò)濾器是個(gè)很有趣的特 性，讓人想起了管道編程。到這里，開(kāi)個(gè)玩笑，你大概也發(fā)現(xiàn)AngularJS真是一個(gè)到處抄襲，哦不，是借鑒各種概念和范型的東西，比如依賴注入抄 Spring，標(biāo)簽定義抄Flex，過(guò)濾器抄Linux的管道：

{{ "lower cap string" | uppercase }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

既然是管道編程，那么肯定支持迭代地使用管道：

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">

事件處理

解耦一定是相對(duì)的，在我們使用各種綁定語(yǔ)句把onClick="javascript:xxx"從DOM上拿掉的時(shí)候，我們就已經(jīng)想到，總有一天，寫(xiě)那些DOM事件綁定的語(yǔ)句寫(xiě)煩了，一定還會(huì)拿回來(lái)：

<img ng-src="{{img}}" ng-click="setImage(img)">

相應(yīng)地，定義setImage：

$scope.setImage = function(imageUrl) {     $scope.mainImageUrl = imageUrl; }

無(wú)論是把這個(gè)綁定關(guān)系拿走還是拿回來(lái)，都是有道理的，選擇你最傾心的方式。就我而言，我傾向于把同一模塊的代碼放置在一起，增加可理解性，而不在乎它的組成是DOM聲明還是JavaScript解釋。

另外，值得一提的是不同controller之間的通信方式，AngularJS推薦的方式是采用事件，具體說(shuō)，controller是可以嵌套 的，$broadcast會(huì)把事件廣播給所有子controller，而$emit則會(huì)將事件冒泡傳遞給父controller，$on則是 AngularJS的事件注冊(cè)函數(shù)：

$scope.$on("DataChange", function (event, msg) {     $scope.$broadcast("DataChange", msg); });

但是，這讓我頗為不爽，如果我的兩個(gè)視圖在不同的controller內(nèi)，我還非得要通過(guò)事件機(jī)制來(lái)保持同步的話，如此啰嗦，我還需要AngularJS干嘛？

吐槽歸吐槽，AngularJS還是非常值得學(xué)習(xí)使用的，尤其是其中的雙向綁定，用起來(lái)真是太爽了。

上述內(nèi)容就是如何借助AngularJS寫(xiě)優(yōu)雅的代碼，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：如何借助AngularJS寫(xiě)優(yōu)雅的代碼
URL標(biāo)題：http://chinadenli.net/article22/jgcscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站改版、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)