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

    今天就到這裏，謝謝。