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

Question

我有一项服务：

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

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

我该怎么做？

Answer 1

TLDR：在一行中您要查找的命令：

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

---

深潜

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

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

从检索到的injector，您可以使用injector.get('ServiceName')

获得您喜欢的任何服务

在此答案中有关此内容的更多信息：Can't retrieve the injector from angular
还有更多：Call AngularJS from legacy code

---

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

Answer 2

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

a）

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

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

这会返回一个对象，此处没有任何新内容。

现在从控制台获取此功能的方法是

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（）。

Answer 3

@ 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里面，这样我就不会在生产代码中找到它了。 I use this method to remove debug code from prouduction builds.

Answer 4

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');