第一套代码：
var app=angular.module('demo',[]);
app.controller('mainController',function(){
this.myVar='hai';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="demo">
<div ng-controller="mainController as mainControl">
<p>{{mainControl.myVar}}</p>
</div>
</html>
第二套代码：
var app = angular.module('demo',['$scope',function($scope) {
$scope.myVar = 'hai';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="demo">
<div ng-controller="mainController">
<p>{{myVar}}</p>
</div>
</html>
我想知道这两种向视图声明模型的方式之间的区别.有人可以解释一下.我是Angular JS的新手
为什么？：控制器被构造,“新建”并提供单个新实例,并且controllerAs语法比经典$scope语法更接近JavaScript构造函数的语法.
为什么？：它促进了对视图中“点”对象的绑定的使用(例如customer.name而不是name),这更加符合上下文,更易于阅读,并且避免了在没有“点”的情况下可能出现的任何引用问题.
为什么？：有助于避免在具有嵌套控制器的视图中使用$parent调用.
<!-- avoid -->
<div ng-controller="Customer">
{{ name }}
</div>
<!-- recommended -->
<div ng-controller="Customer as customer">
{{ customer.name }}
</div>
> controllerAs控制器语法：使用带有$scope语法的经典控制器上的controllerAs语法.
controllerAs语法使用这个绑定到$scope的内部控制器
为什么？：控制器是超过美元范围的语法糖.您仍然可以绑定到View并仍然访问$scope方法.
为什么？：有助于避免在控制器中使用$scope方法的诱惑,否则可能更好地避免它们或将它们移动到工厂.考虑在工厂中使用$scope,或者在需要时在控制器中使用.例如,使用$emit,$broadcast或$on发布和订阅事件时,请考虑将这些用途移至工厂并从控制器调用.
/* avoid */
function Customer ($scope) {
$scope.name = {};
$scope.sendMessage = function () { };
}
/* recommended - but see next section */
function Customer () {
this.name = {};
this.sendMessage = function () { };
}
> controllerAs with vm：在使用controllerAs语法时使用捕获变量.选择一致的变量名称,例如vm,它代表viewmodel.
为什么？：this关键字是上下文的,当在控制器内的函数内使用时,可能会改变其上下文.捕获这种情况可以避免遇到这个问题.
/* avoid */
function Customer () {
this.name = {};
this.sendMessage = function () { };
}
/* recommended */
function Customer () {
var vm = this;
vm.name = {};
vm.sendMessage = function () { };
}
注意：您可以通过将注释置于代码行上方来避免任何jshint警告.
/ * jshint validthis：true /
var vm = this;
注意：使用控制器创建控制器中的监视时,可以观看虚拟机.使用以下语法的成员. (小心创建手表,因为它们会为摘要周期增加更多负载.)
$scope.$watch('vm.title',function(current,original) {
$log.info('vm.title was %s',original);
$log.info('vm.title is now %s',current);
});
https://github.com/johnpapa/angularjs-styleguide#controllers
