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

    今天就到這里，謝謝。