javascript - 使用 Angular $scope 依赖和不使用依赖之间的区别

Question

我对 Angular 有一些不明白的地方。我是 Angular 的新手，我不记得在哪里，但教我使用此语法的教程确实将属性应用于 Controller 的范围:

app.controller('someCtrl', function(){
        this.variable = "hey!";
});

所以，我正在启动我的网络应用程序，一切都很好，然后我想添加一些与我的 node.js 服务器的 socket.io 交互性。所以我正在寻找一些关于如何使它们协同工作的教程，我遇到了这种语法:

app.controller('someCtrl', ['$scope', function($scope){
        $scope.variable = "hey!";
}]);

我觉得这很奇怪，所以我研究了 Angular 关于依赖注入(inject)和作用域的文章，我发现这实际上是每个人都在这样做的方式......我也开始看到它允许你与 $rootScope 交互和其他东西，我猜这是让 Controller 相互交互的方式。但我仍然看不出两者之间的区别。第一个是用来教人们 Angular 的基础知识，以便轻松地向他们介绍范围和依赖注入(inject)概念的？

预先感谢您的回答。

Answer 1

是的，这太令人困惑了，我希望 Angular 的人只使用第二个。第一个对于任何 JS 开发人员来说都更容易阅读和理解，但是文档曾经指出(据我所知，现在已经从文档中消失了):

Previous versions of Angular (pre 1.0 RC) allowed you to use this interchangeably with the $scope method, but this is no longer the case. Inside of methods defined on the scope this and $scope are interchangeable (angular sets this to $scope), but not otherwise inside your controller constructor.

从某些版本开始，通常使用第二种语法(通过依赖注入(inject)注入(inject) $scope)，即使它对新手来说有点可怕，函数变量列表中的数组(这是缩小所需的)和所有.

但是情况变得更糟，因为最近这个以稍微不同的形式卷土重来，“controller as”语法:

HTML

<div ng-controller="MainController as main">  
  {{ main.someProp }}
</div>  

Javascript

app.controller('MainController', function () {  
  var model = this;
  model.someProp = 'Some value.'
});

因此，您读到的很可能是“controller as”语法，该语法目前正在越来越多地推迟第二种依赖注入(inject)形式。如果您查看 HTML 并找到 XxxController as yyyy，则可以将其与旧示例区分开来。

通常，您不会一直在 Controller 的函数中使用 this，因为 Javascript 中 this 的作用域很容易引入错误。因此，最好立即将 this 分配给某个局部变量，然后像使用 $scope 一样使用该变量(在我的示例中为 model) >.

TL;DR:使用“controller as”语法以适应 future 需求，但直到最近才知道，最佳实践是注入(inject) $scope。