上次分享完該系列文章後有朋友也建議說1.x版本除了維護也沒有必要學習，可以學習2.0開始學習，我也知道1.x無論是從性能還是架構上都沒有2.x好，但是我想因為現在也有一些朋友還在用1.x版本，因為1.x升級到2.x難度很大，甚至可以說重構，就向我們公司現在還在用1.x版本，所以我還是決定把這系列寫完 ...
上次分享完該系列文章後有朋友也建議說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標簽內容可以藉助該綁定方法，但是該綁定需要引用一個序列化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>
