標籤：nodejs angularjs 綁定 資料繫結 整合 nbsp 升級 知識點 解析
上次分享完該系列文章後有朋友也建議說1.x版本除了維護也沒有必要學習，可以學習2.0開始學習，我也知道1.x無論是從效能還是架構上都沒有2.x好，但是我想因為現在也有一些朋友還在用1.x版本，因為1.x升級到2.x難度很大，甚至可以說重構，就向我們公司現在還在用1.x版本，所以我還是決定把這系列寫完，也給自己一個整理的過程。本人現在也正在學習Angular4.0版本的學習，但是4.0用typescript及nodejs整合比較大，還有學習angular-cli腳手架的學習，所以等我學會以後準備在分享給大家。這個暫時先不討論，今天繼續給大家分享控制、資料繫結、範圍的知識點。
1、控制器：
概念：在angularJS中控制器是一個函數，用來向視圖的範圍添加額外的功能，用來設定範圍的初始狀態並添加自訂行為。
控制器的聲明： app.controller(‘controllerName’,function($scope){...})
// 控制器定義 // 第一參數： 控制器名稱， 第二個參數： 匿名函數， 傳入範圍,並在範圍上添加額外功能 app.controller(‘myCtrl‘, function($scope) { $scope.expression = "hello expression"; $scope.ngbind = "hello ng-bind"; $scope.htmlbind = "<font color=‘red‘>hello,htmlbind</font>"; $scope.subCtrl = "hello subCtrl"; });
控制器的使用：在需要的地方（html某個標籤上）添加ng-controller。
<body ng-app="myapp" ng-controller="myCtrl">
從上面看控制的定義和使用還是比較簡單的，但是很多人會對控制器的作用及控制器中都需要寫什麼代碼有些不瞭解，有的人會把整個代碼都推擠到控制器中，我個人覺得控制器只是一個頁面view及mode的一個紐帶，只處理一些資料繫結，事件綁定等等一些列簡單的邏輯，具體的伺服器訪問或者資料讀取等應該在服務裡去實現，服務我在下次的時候會詳細給大家說。
我簡單對控制使用方面注意的事項整理了一下，供大家參考：
1）儘可能精簡控制器和$scope相關的操作。
2）不要複用Controller,一個控制器一般只負責一小塊視圖。
3）不要在Controller中操作DOM，這不是控制器的職責。
4）盡量不要在Controller裡做資料過濾、資料操作。
5）一般來說，Controller裡不會互相調用的，控制器之間的互動會通過事件進行
2、範圍（$scope）
上面控制器中也提到範圍，控制器主要跟$scope相關的操作，我簡單給大家說一下範圍在AngularJs中的作用及他的生命週期，我用內部分享時的總結貼出來給大家分享一下：
3、資料繫結：
AngularJs資料繫結也有好幾種綁定，我給大家列出來，有可能大家都用過，有可能有的朋友有些綁定沒有用過。
1）運算式{{}}：
常量：{{‘const’}}
變數：{{abc}}
函數：{{func()}}
運算式：{{a+b}}
該方法是最為常見的，運算式綁定，只要在Angular的範圍範圍之內Angular遇到該運算式自動解析為Html識別的運算式或者變數。
2）指令方式（ng-bind）：
該綁定方式為在元素上添加ng-bind指令，然後Angular解析指令並執行該綁定。
3）ng-model：
該方式主要用在表單提交方面用的比較多，實現資料雙向繫結，頁面內容及model之間實現雙向資料。
4）ng-bind-html：
該方式為主要針對Html元素繫結時用，因為Angularjs預設對Html標籤不做解析，直接輸出，所以想在頁面上顯示Html標籤內容可以藉助該Binder 方法，但是該綁定需要引用一個序列化js檔案。
<script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>
5）ng-bind-template：
該方式可以一次綁定多個變數及運算式。
使用情境：
首頁使用ng-bind， 模板裡面的頁面可以使用括弧 {{}}，表單使用ng-model，{{}}文法的缺陷：在使用者的不斷重新整理中是有可能看到{}的；而且在網路不好的情況下也有可能看到
如下代碼為把上述五種方法的整體代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首頁</title> <!--引用AngularJs庫 --> <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script> <!-- 引入angularJs Html格式化庫--> <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script></head><!-- 資料繫結方式1、{{}} 2、指令綁定 3、ng-bind綁定 4、ng-bind-html綁定 5、ng-bind-template綁定--><body ng-app="myapp" ng-controller="myCtrl"> <!-- 1、運算式綁定 --> <h1>{{expression}}</h1> <!-- 2、指令綁定--> <h2>{{ngmodel}}</h2> <input type="text" ng-model="ngmodel"> <!-- 3、ng-bind綁定--> <h3 ng-bind="ngbind"></h3> <h3 class="ng-bind:ngbind"></h3> <!-- 4、ng-bind-html綁定--> <h4 ng-bind-html="htmlbind"></h4> <!-- 5、ng-bind-template --> <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5></body></html><script> //模組定義 // 第一個參數：應用程式名稱，第二個參數：應用相依模組 var app = angular.module(‘myapp‘, [‘ngSanitize‘]); // 控制器定義 // 第一參數： 控制器名稱， 第二個參數： 匿名函數， 傳入範圍,並在範圍上添加額外功能 app.controller(‘myCtrl‘, function($scope) { $scope.expression = "hello expression"; $scope.ngbind = "hello ng-bind"; $scope.htmlbind = "<font color=‘red‘>hello,htmlbind</font>"; $scope.subCtrl = "hello subCtrl"; });</script>
AngularJs學習筆記2-控制器、資料繫結、範圍
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
