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

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、白云網(wǎng)絡(luò)推廣、小程序設(shè)計(jì)、白云網(wǎng)絡(luò)營(yíng)銷、白云企業(yè)策劃、白云品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供白云建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

1、控制器：

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

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

//  控制器定義
  //  第一參數(shù)： 控制器名稱， 第二個(gè)參數(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某個(gè)標(biāo)簽上）添加ng-controller。

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

我簡(jiǎn)單對(duì)控制使用方面注意的事項(xiàng)整理了一下，供大家參考：

1）盡可能精簡(jiǎn)控制器和$scope相關(guān)的操作。

2）不要復(fù)用Controller,一個(gè)控制器一般只負(fù)責(zé)一小塊視圖。

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

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

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

2、作用域（$scope）

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

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

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

1）表達(dá)式{{}}：

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

表達(dá)式：{{a+b}}

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

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

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

3）ng-model：

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

4）ng-bind-html：

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

5）ng-bind-template：

該方式可以一次綁定多個(gè)變量及表達(dá)式。

使用場(chǎng)景：

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

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

  
  
  
  
  
  





  
  
{{expression}}
  
  
{{ngmodel}}
  
  
  
  
  
  
  
  

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