如何从控制台测试AngularJS服务?

我有这样的服务:

angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})

我想从JavaScript控制台测试它并调用服务的f1()函数。

我该怎么做呢?

123027 次浏览

首先,您的服务的修改版本。

一)

var app = angular.module('app',[]);


app.factory('ExampleService',function(){
return {
f1 : function(world){
return 'Hello' + world;
}
};
});

这返回一个对象,这里没有new。

从控制台获取这个的方法是

b)

var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");

c)

你之前在那里做的一件事是假设app.factory返回给你函数本身或它的新版本。事实并非如此。为了得到一个构造函数,你必须

app.factory('ExampleService',function(){
return function(){
this.f1 = function(world){
return 'Hello' + world;
}
};
});

这将返回一个ExampleService构造函数,接下来你必须对它进行“new”操作。

或者,

app.service('ExampleService',function(){
this.f1 = function(world){
return 'Hello' + world;
};
});

它在注入时返回新的ExampleService()。

TLDR:在一行中,你正在寻找的命令:

angular.element(document.body).injector().get('serviceName')

深潜水

AngularJS使用依赖注入(DI)将服务/工厂注入到组件、指令和其他服务中。所以你需要做的是首先获得AngularJS的注射器(注入器负责连接所有依赖项并将它们提供给组件)。

要获得应用的注射器,你需要从angular正在处理的元素中获取它。例如,如果你的应用程序注册在body元素上,你调用injector = angular.element(document.body).injector()

从检索到的injector中,你可以使用injector.get('ServiceName')获得任何你想要的服务

更多信息在这个答案:不能从angular中检索注入器
这里还有更多:从遗留代码调用AngularJS


另一个获取特定元素的$scope的有用技巧。 选择开发工具中带有DOM检查工具的元素,然后运行以下行($0始终是所选元素):
angular.element($0).scope() < / p >

@JustGoscha的答案是正确的,但当我想访问时,这是很多类型,所以我把它添加到我的app.js的底部。然后我需要输入x = getSrv('$http')来获取http服务。

// @if DEBUG
function getSrv(name, element) {
element = element || '*[ng-app]';
return angular.element(element).injector().get(name);
}
// @endif

它将其添加到全局作用域,但仅在调试模式下添加。我把它放在@if DEBUG中,这样我就不会在生产代码中使用它。我使用这种方法从生产版本中删除调试代码。

Angularjs依赖注入框架负责将应用模块的依赖注入到控制器中。这可以通过注入器实现。

你需要首先识别ng-app并获取相关的注入器。 下面的查询可以在DOM中找到你的ng-app并检索注入器
angular.element('*[ng-app]').injector()

然而,在chrome中,你可以指向目标ng-app,如下所示。并使用$0黑客并发布angular.element($0).injector()

一旦你有了注入器,获得任何依赖注入服务,如下所示

injector = angular.element($0).injector();
injector.get('$mdToast');

enter image description here