angularjs - 如何从控制台测试 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的注入器（注入器负责连接所有的依赖关系并将它们提供给组件）。

要获取应用程序的注入器，您需要从 Angular 正在处理的元素中获取它。例如，如果您的应用在您调用的 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

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

一个 ）

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 构造函数，您接下来必须对其执行“新建”。

或者，

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

这将在注入时返回 new 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这样我就不会在生产代码中得到它。 我使用这种方法从产品构建中删除调试代码。

Answer 4

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

您需要首先识别 ng-app 并获取关联的注入器。下面的查询用于在 DOM 中找到您的 ng-app 并检索注入器。

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

但是，在 chrome 中，您可以指向目标 ng-app，如下所示。并使用$0hack 和 issueangular.element($0).injector()

拥有注入器后，获取任何依赖注入服务，如下所示

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