如何借助AngularJS寫優(yōu)雅的代碼

{name: "sally", price: 30}

 sally

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

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

          {{queryObj.name}} 

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

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

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

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

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

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

   
Error occurs.
 

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

依賴注入

依賴注入（Dependency Injection，DI）對于使用過Spring的程序員來說實在是再熟悉不過了，所謂依賴注入，就是把某個過程中注入值的步驟交給外部框架、容器來完成。舉例來說，這樣的代碼：

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

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

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

過濾器

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

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

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

事件處理

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

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

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

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

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

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

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

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

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