首页 文章

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

提问于
浏览
370

我有这样的服务:

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

我想 test it from the JavaScript console 并调用该服务的函数 f1() .

我怎样才能做到这一点?

4 回答

  • 12

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

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

    深潜

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

    要获得应用程序的 injector ,您需要从角度处理的元素中获取它 . 例如,如果您的应用程序在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 inspection tool 选择元素,然后运行以下行( $0 始终是所选元素):
    angular.element($0).scope()

  • 23

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

    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() .

  • 3

    @JustGoscha 's answer is spot on, but that'在我想要访问时要输入很多内容,所以我将其添加到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.

  • 657

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

    您需要首先识别ng-app并获取相关的注射器 . 以下查询用于在DOM中查找ng-app并检索注入器 .

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

    但是,在chrome中,您可以指向目标ng-app,如下所示 . 并使用 $0 hack并发出 angular.element($0).injector()

    获得注入器后,获取任何依赖注入服务,如下所示

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

    enter image description here

相关问题