日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 

  
  
{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變化的時(shí)候，其它二者也會被及時(shí)更新。這就是AngularJS的雙向綁定。我覺得這大概是AngularJS最精華的部分。

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

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

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

 
 

  
  

  
  
  
Error occurs.
  
  

 
 

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

依賴注入

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

 
 

  
  
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ù)它來判定需要依賴注入的。

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

過濾器

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

 
 

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

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

事件處理

解耦一定是相對的，在我們使用各種綁定語句把onClick="javascript:xxx"從DOM上拿掉的時(shí)候，我們就已經(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)，我還非得要通過事件機(jī)制來保持同步的話，如此啰嗦，我還需要AngularJS干嘛？

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

• 官網(wǎng)教程
• 《使用AngularJS開發(fā)下一代Web應(yīng)用》譯者的博客
• Angular Guide的社區(qū)翻譯版本（比原文包含更多的東西）
• Make Your Own AngularJS
• Angular UI