angular controller as syntax vs scope

今天要和大家分享的是angular從1.2版本開始帶來了新語法Controller as。再次之前我們對於angular在view上的綁定都必須使用直接的scope對象，對於controller來說我們也得必須注入$scope這個service。如下：

angular.module("app",[])
.controller("demoController",["$scope",function($scope){
    $scope.title = "angualr";
 }])
<div ng-app="app" ng-controller="demoController">
    hello : `title` !
</div>

有些人覺得即使這樣我們的controller還是不夠POJO，以及對於coffescript愛好者不足夠友好，所以在angular在1.2給我帶來了一個新的語法糖這就是本文將要說的controller as的語法糖，修改上面的demo將會變成：

angular.module("app",[])
.controller("demoController",[function(){
    this.title = "angualr";
}])
<div ng-app="app" ng-controller="demoController as demo">
     hello : `demo`.`title` !
</div>

這裏我們可以看見現在controller不再有$scope的注入了，感覺controller就是一個很簡單的平面的JavaScript對象了，不存在任何的差別了。再則就是view上多增加了個demoController as demo，給controller起了一個別名，在此後的view模板中靠這個別名來訪問數據對象。

或許看到這裏你會問爲什麼需要如此啊，不就是個語法糖而已，先彆着急，我們會在後邊分析$scope和他的差別。在此之前我們先來看看angular源碼的實現這樣纔會有助於我們的分析：

下面是一段來自angular的code：在1499行開始(行數只能保證在寫作的時候有效)

if (directive.controllerAs) {
         locals.$scope[directive.controllerAs] = controllerInstance;
  }

如果你希望看更完全的code請猛擊這裏https://github.com/angular/angular.js/blob/c7a1d1ab0b663edffc1ac7b54deea847e372468d/src/ng/compile.js.

從上面的代碼我們能看見的是：angular只是把controller這個對象實例以其as的別名在scope上創建了一個新的對象屬性。靠，就這麼一行代碼搞定！

先別急，既然是語法糖，那麼它肯定有他出現的原因，讓我們來和直接用$scope對比下：

在此文之前我在angularjs的羣中和大家討論了下我的看法，得到大家不錯的反饋，所以有了本文，記錄和分享下來。

我規定對於controller as的寫法如下：

angular.module("app",[])
 .controller("demoController",[function(){
        var vm = this;
        vm.title = "angualr";
        return vm;
 }])

其優勢爲：

1. 定義vm這樣會讓我們更好的避免JavaScript的this的坑。

2. 如果某個版本的angular不再支持controller as,可以輕易的注入$scope,修改爲 var vm = $scope;

3. 因爲不再注入$scope了，controller更加的POJO，就是一個很普通的JavaScript對象。

4. 也因爲沒有了$scope，而controller實例將會成爲scope上的一個屬性，所以在controller中我們再也不能使用$watch,$emit,$on之類的特殊方法，因爲這些東西往往不該出現在controller中的，給大家一個警告，更好的控制。但是一旦如果沒辦法必須用的話，可以在徵得項目組一致同意，將此controller退回$scope.

5. 因爲controller實例將會只是$scope的一個屬性，所以view模板上的所有字段都會在一個引用的屬性上，這可以避開JavaScript原型鏈繼承對於值類型的坑。參加https://github.com/angular/angular.js/wiki/Understanding-Scopes.

6. controller as 對於 coffescript,liveScript更友好。 7.模板上定義的每個字段方法都會在scope寄存在controller as別名上的引用上，所以在controller繼承中，不會在出現命名衝突的問題。

註釋:對於route，也有個controllerAs的屬性可以設置，下面代碼來之angular doc文檔：

angular.module('ngViewExample', ['ngRoute', 'ngAnimate'],
     function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: BookCntl,
      controllerAs: 'book'
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: ChapterCntl,
      controllerAs: 'chapter'
    });
    // configure html5 to get links working on jsfiddle
         $locationProvider.html5Mode(true);
     });

今天就到這裏，謝謝。