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