小編給大家分享一下AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

目前創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、網(wǎng)站運營、企業(yè)網(wǎng)站設計、融水網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1、控制器：

概念：在angularJS中控制器是一個函數(shù)，用來向視圖的作用域添加額外的功能，用來設置作用域的初始狀態(tài)并添加自定義行為。

控制器的聲明： app.controller(‘controllerName',function($scope){...})

//  控制器定義
  //  第一參數(shù)： 控制器名稱， 第二個參數(shù)： 匿名函數(shù)， 傳入作用域,并在作用域上添加額外功能
  app.controller('myCtrl', function($scope) {
    $scope.expression = "hello expression";
    $scope.ngbind = "hello ng-bind";
    $scope.htmlbind = "hello,htmlbind";
    $scope.subCtrl = "hello subCtrl";

  });

控制器的使用：在需要的地方（html某個標簽上）添加ng-controller。

從上面看控制的定義和使用還是比較簡單的，但是很多人會對控制器的作用及控制器中都需要寫什么代碼有些不了解，有的人會把整個代碼都推擠到控制器中，我個人覺得控制器只是一個頁面view及mode的一個紐帶，只處理一些數(shù)據(jù)綁定，事件綁定等等一些列簡單的邏輯，具體的服務器訪問或者數(shù)據(jù)讀取等應該在服務里去實現(xiàn)，服務我在下次的時候會詳細給大家說。

我簡單對控制使用方面注意的事項整理了一下，供大家參考：

1）盡可能精簡控制器和$scope相關的操作。

2）不要復用Controller,一個控制器一般只負責一小塊視圖。

3）不要在Controller中操作DOM，這不是控制器的職責。

4）盡量不要在Controller里做數(shù)據(jù)過濾、數(shù)據(jù)操作。

5）一般來說，Controller里不會互相調(diào)用的，控制器之間的交互會通過事件進行

2、作用域（$scope）

上面控制器中也提到作用域，控制器主要跟$scope相關的操作，我簡單給大家說一下作用域在AngularJs中的作用及他的生命周期，我用內(nèi)部分享時的總結(jié)貼出來給大家分享一下：

3、數(shù)據(jù)綁定：

AngularJs數(shù)據(jù)綁定也有好幾種綁定，我給大家列出來，有可能大家都用過，有可能有的朋友有些綁定沒有用過。

1）表達式{{}}：

常量：{{‘const'}}
變量：{{abc}}
函數(shù)：{{func()}}

表達式：{{a+b}}

該方法是最為常見的，表達式綁定，只要在Angular的作用域范圍之內(nèi)Angular遇到該表達式自動解析為Html識別的表達式或者變量。

2）指令方式（ng-bind）：

該綁定方式為在元素上添加ng-bind指令，然后Angular解析指令并執(zhí)行該綁定。

3）ng-model：

該方式主要用在表單提交方面用的比較多，實現(xiàn)數(shù)據(jù)雙向綁定，頁面內(nèi)容及model之間實現(xiàn)雙向數(shù)據(jù)。

4）ng-bind-html：

該方式為主要針對Html元素綁定時用，因為Angularjs默認對Html標簽不做解析，直接輸出，所以想在頁面上顯示Html標簽內(nèi)容可以借助該綁定方法，但是該綁定需要引用一個序列化js文件。

5）ng-bind-template：

該方式可以一次綁定多個變量及表達式。

使用場景：

首頁使用ng-bind， 模板里面的頁面可以使用括號 {{}}，表單使用ng-model，{{}}語法的缺陷：在用戶的不斷刷新中是有可能看到{}的；而且在網(wǎng)絡不好的情況下也有可能看到

如下代碼為把上述五種方法的整體代碼：

  
  
  
  
  
  





  
  
{{expression}}
  
  
{{ngmodel}}
  
  
  
  
  
  
  
  

看完了這篇文章，相信你對“AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://weahome.cn/article/dddsjs.html