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


How can I test an AngularJS service from the console?

我有这样的服务：

1
2
3
4
5
6
angular.module('app').factory('ExampleService', function(){
  this.f1 = function(world){
    return 'Hello '+world;
  }
  return this;
})

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

我该怎么做？

tldr:在一行中，您要查找的命令是：

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

深俯冲

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

要获得应用程序的注入器，您需要从角处理的元素中获取它。例如，如果您的应用程序注册在body元素上，则称为injector = angular.element(document.body).injector()。

从检索到的injector中，您可以得到任何您喜欢的injector.get('ServiceName')服务。

关于这个答案的更多信息：无法从角度检索喷油器更重要的是：从遗留代码调用angularjs

获取特定元素的$scope的另一个有用技巧。使用开发人员工具的DOM检查工具选择元素，然后运行以下行($0始终是所选元素)：angular.element($0).scope()

相关讨论

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

a)

1
2
3
4
5
6
7
8
9
var app = angular.module('app',[]);

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

这将返回一个对象，这里没有新对象。

现在从控制台获得这个的方法是

b)

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

c)

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

1
2
3
4
5
6
7
app.factory('ExampleService',function(){
        return function(){
            this.f1 = function(world){
                return 'Hello' + world;
            }
        };
    });

这将返回一个exampleService构造函数，您接下来必须对其执行"new"。

或者，

1
2
3
4
5
app.service('ExampleService',function(){
            this.f1 = function(world){
                return 'Hello' + world;
            };
    });

这将在注入时返回新的exampleService()。

相关讨论

@Justgoscha的答案是"点对点"，但当我想要访问时，这是一个需要输入的东西，所以我把它添加到了app.js的底部。然后我只需要输入x = getSrv('$http')就可以获得HTTP服务。

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

它将它添加到全局作用域，但只在调试模式下添加。我把它放在@if DEBUG中，这样我就不会在生产代码中使用它了。我使用这个方法从工程构建中删除调试代码。

AngularJS依赖注入框架负责将应用程序模块的依赖注入控制器。这可以通过其喷油器实现。

您需要首先识别NG应用程序并获取相关的注入器。下面的查询用于在DOM中查找NG应用程序并检索注入器。

1
angular.element('*[ng-app]').injector()

然而，在Chrome中，您可以指向目标NG应用程序，如下所示。使用$0黑客并发布angular.element($0).injector()。

一旦您拥有了注入器，就可以获得如下所示的任何依赖项注入服务

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

enter image description here