Angularjs “使用”的理由是什么；controllerAs“；财产？

我正在编写AngularJS教程，我看到以下代码：

.state('index',{
  url:"/",
  templateUrl:"views/index.html",
  controller:"IndexCtrl",
  controllerAs:"index"
})

---

有人想使用controllerAs属性的原因是什么？

也许你搜索得不够

正如名称“controllerAs”告诉我们的，它是控制器的别名。您可以使用该别名访问控制器。

几件事：

1。减少范围使用

您可以简单地使用

this

加载所需的所有内容，而不是加载控制器范围内的所有数据

例如：

路线

内部控制器

angular.module('feed').controller('ListCtrl', function($scope, reddit){
    var vm   = this;
    vm.names = ["Michael", "Roy"];

});

在模板中：

<ul>
    <li ng-repeat="name in list.names">
        <div>{{name}}</div>
    </li>
</ul>

正确：

<span>Outside Controller: Your name is: {{user.name}}</span>
<div ng-controller="SignupController">
    <span>Inside Controller: Your name is: {{user.name}}</span>
    <fieldset legend="User details">
        <input ng-model="user.name">
    </fieldset>
</div>

外部控制器：您的名字是：{{user.name}
内部控制器：您的名字是：{{user.name}

找到了一个让一切都更清晰的图像：

---

礼貌：

您可以通过以下多种方式设置控制器：

$stateProvider.state('contacts', {
  template: '<h1>{{title}}</h1>',
  controller: function($scope){
    $scope.title = 'My Contacts';
  }
})

或者，使用controllerAs语法，上述内容变为：

$stateProvider.state('contacts', {
  template: '<h1>{{contact.title}}</h1>',
  controller: function(){
    this.title = 'My Contacts';
  },
  controllerAs: 'contact'
})

或者，对于更高级的需求，您可以使用controllerProvider为您动态返回控制器函数或字符串：

$stateProvider.state('contacts', {
  template: ...,
  controllerProvider: function($stateParams) {
      var ctrlName = $stateParams.type + "Controller";
      return ctrlName;
  }
})

资料来源：

简单地说，控制器作为语法有助于我们使用嵌套控制器。命名范围已明确定义，因此控制器之间不会发生冲突，因为您必须在点之前声明引用的控制器

<div ng-controller="Shell as shellVm">
  <h1>{{shellVm.title}}</h1>
  <article ng-controller="Customers as customersVm">
    <h2>{{customersVm.title}} in {{shellVm.title}}</h2>
    <ul ng-repeat="c in customersVm.customers">
      <li>{{c.name}}</li>
    </ul>
  </article>
</div>

{{shellVm.title}
还有。
是的。更多信息：

在使用
controllerAs
语法之前，需要通过将方法和属性绑定到
$scope
向视图公开它们。使用
controllerAs
，控制器实例将绑定到
$scope
作为您选择的属性

通过这种方式，您可以为控制器使用普通的旧JavaScript类

社论：这是一种更清洁的发展方式。使Angular编写测试变得如此容易的一个原因是控制器和组件不需要从框架基类继承。参见主干和余烬

因此，对于旧式控制器，您的控制器看起来会像（为了简单起见，在ES6中）：

与controllerAs

class YourController {
  
    constructor() {

        this.myProperty = true;
    }

    myMethod() { . . . };
}

只是一个普通的旧类，而不是装饰或修补
$scope
如果我们尽量减少使用$scope
，那么性能也会有所提高，这是怎么回事？你能解释一下吗？。我认为controllerAlias只是作为作用域（为控制器创建的作用域）上的一个属性添加的，其值与控制器实例的值相同。因此，您并没有直接最小化$scope的使用。我同意答案中的其他部分。在第1点中，`controller:'ListCtrl'，`link to
vm
？不应该
{{name}}
是
{{vm.name}}
？我一直支持你，直到“这是一种更干净的开发方法”。现在我们有了一个可发现的，但不是非常明显的（因此OP的问题），参考暴露，这进一步迫使你使用
这个
，这在客观上不是很好：“在语言中有
这个
，这使得谈论语言变得更加困难。这就像与Abbott和Costello进行配对编程。”但是，如果我们不考虑主观角度，这个答案会非常准确地反映出为什么有人会弯腰弯得这么低^这和新的是语言的一部分。有像TypeScript和/或ESLint这样的工具可以解决Crockford描述的问题，而不需要忽略JavaScript的主要功能。只需指出，您已经解释了为什么使用
controllerAs
，但至少比我聪明的人可能不同意，它的使用无疑是一种改进
controllerAs
是一种约定，它比
$scope
更为深奥，后者已经为您提供了公开引用的现成渠道（尽管如此）。在任何情况下，一个人都可能，而且经常会，做得比听从克罗克福德的建议更糟糕。
$stateProvider.state('contacts', {
  template: ...,
  controller: 'ContactsCtrl as contact'
})

$stateProvider.state('contacts', {
  template: ...,
  controllerProvider: function($stateParams) {
      var ctrlName = $stateParams.type + "Controller";
      return ctrlName;
  }
})

<div ng-controller="Shell as shellVm">
  <h1>{{shellVm.title}}</h1>
  <article ng-controller="Customers as customersVm">
    <h2>{{customersVm.title}} in {{shellVm.title}}</h2>
    <ul ng-repeat="c in customersVm.customers">
      <li>{{c.name}}</li>
    </ul>
  </article>
</div>

YourController.$inject = ['$scope'];
class YourController {
  
    constructor($scope) {

        $scope.myMethod = () => { . . . };

        $scope.myProperty = true;
    }
}

class YourController {
  
    constructor() {

        this.myProperty = true;
    }

    myMethod() { . . . };
}