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);     });

今天就到這裡，謝謝。

本文出自 “破狼” 部落格，請務必保留此出處http://whitewolfblog.blog.51cto.com/3973901/1345308