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

时间:2016-02-16 19:36:12

标签: javascript angularjs socket.io angularjs-scope

我对Angular不了解。 我是Angular的新手,我不记得在哪里,但教我使用这种语法的教程确实将属性应用于控制器的范围:

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

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

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

我认为这很奇怪,所以我查看了Angular关于依赖注入和范围的文章,我发现它实际上是每个人都这样做的方式......我也开始看到它允许你与$ rootScope和其他东西进行交互,这就是让控制器互相交互的方式。但我仍然没有看到两者之间的差异。第一个是用来教人们角度的基础知识,以便轻松地将它们引入范围和依赖注入概念吗?

提前感谢您的回答。

2 个答案:

答案 0 :(得分:2)

是的,这令人困惑,我希望Angular家伙只会使用第二个。对于任何JS开发人员来说,第一个更易于阅读和理解,但是用于声明的文档(AFAIK,现在已经从文档中删除):

  

以前版本的Angular(pre 1.0 RC)允许您与$ scope方法交替使用它,但现在不再是这种情况了。在范围内定义的方法内部,这个和$ scope是可以互换的(角度设置为$ scope),但在控制器构造函数中没有。

由于某些版本,通常使用第二种语法(通过依赖注入注入$ scope),即使它对新手有点可怕,函数变量列表中的数组(缩小所需的)和所有

情况变得更糟,因为最近this以稍微不同的形式卷土重来,“控制器为”语法:

<强> HTML

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

<强>的Javascript

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

所以,你读到的很可能是“控制器为”语法,目前正在越来越多地推迟第二种依赖注入形式。如果您查看HTML以查找XxxController as yyyy,则可以将其与旧示例区分开来。

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

TL; DR:使用“控制器为”语法以便面向未来,但直到最近才知道,最佳做法是注入$scope

答案 1 :(得分:0)

基本上,你应该直接注入$scope作为依赖,以避免缩小问题。

进行缩小时,$scope将被翻译为e,而Angular将不知道如何使用e本身。

var app=angular.module("myApp",[]);app.controller("mainController",function(e){e.message="OH NO!"})

如图所示直接注入依赖项时,$scope将不会以任何其他方式重命名,因此Angular将知道如何处理它。

查看this article on Scotch.io

我希望我一直很有帮助。