如何从控制台测试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')

在这个答案中有关于此的更多信息:无法从角度检索注入器在
这里更多:从遗留代码调用AngularJS

获得$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构造函数,接下来您必须执行"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所以我不会在生产代码中结束它. 我使用此方法从prouduction构建中删除调试代码.

Answer 4

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

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

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

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

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

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