传统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