傳統controller與controllerAs

傳統controller與controllerAs(前面爲傳統，後面爲controllerAs,分割線分隔):

路由模塊：

.state('home.packing', {
    url: '/packing',
    templateUrl: '/app/home/packing.html',
    controller: 'home.packingController'
})

----------------------------------------------------------------

.state('home.packing', {
    url: '/packing',
    templateUrl: '/app/home/packing.html',
    controller: 'home.packingController as vm',
})//或者下面寫法

.state('home.packing', {
    url: '/packing',
    templateUrl: '/app/home/packing.html',
    controller: 'home.packingController',
    controllerAs: 'vm'
})

控制器模塊：

(function () {
    angular.module('app')
        .controller('home.packingController',['$scope','Core',packingController])
    function packingController($scope,Core) {
        var context = $scope;
　　　　　context.msg = 'controller'　
        context.onClickChangeService = onClickChangeService;
        function onClickChangeService (msg) {
            console.log(msg)
        }
    }
})();

----------------------------------------------------------------

(function () {
    angular.module('app')
        .controller('home.packingController',['Core',packingController])
    function packingController(Core) {
        var self = this;//self指View Module
        self.msg = 'controllerAs'
        self.onClickChangeService = onClickChangeService;
        function onClickChangeService (msg) {
            console.log(msg)
        }
    }
})();

html模塊:

<div>{{msg}}</div>
<div ng-click="onClickChangeService(msg)">點擊</div>

----------------------------------------------------------------

<div>{{vm.msg}}</div>
<div ng-click="vm.onClickChangeService(vm.msg)">點擊</div>

爲何使用controllerAs:

1.$scope是基於原型進行繼承的，好比說當咱們查找一個user對象時，angular會先查找當前$scope有沒有user，若是沒有的話就繼續往上層$scope查找，直至$rootScope。

而在controllerAs中，假設咱們使用controllerAs

UserCtrl as ctrl 
angular將控制器自身掛載在$scope上，user也變爲ctrl.user，就不會存在上述的一層層查找的過程。在不少狀況下，好比在嵌套的路由中，上述$scope基於原型的查找，有時候確實會提供一些便利，但這些均可以用服務來實現，也應該使用服務來實現。

2.你們在初次接觸angular時必定會被推薦過將全部數據都綁定在$scope的一個對象上（好比$scope.data）來避免一些js中值的複製和對象的引用可能會形成的一些問題（公司裏的新人大部分也確實遇到過這類問題），而使用controllerAs後就不須要這一步了，由於人家原本就是。

3.由於不使用$scope也就不能使用$on,$watch,$emit之類的方法，這些方法原本就應該儘可能少用，這樣就能夠更好的控制項目中的代碼，當不得不用這類方法時能夠參考下面的案例。

4.便於新人學習，我發現新人對於$scope這個東西每每沒法理解，而用controllerAs vm以後，則將vm（view model的簡寫）做爲視圖模型則比較好理解。

5.在一個頁面中若是使用嵌套控制器，更加清晰，而且能夠避免讓 $scope 默認繼承父組件的內容(由於在子控制器中沒有聲明也會繼承父控制器中的內容，形成顯示錯誤數據)

參看連接：使用controller代替$scope