ChatGPT解决这个技术问题 Extra ChatGPT

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

我有这样的服务:

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

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

我怎样才能做到这一点?


J
JustGoscha

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

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

深潜

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

要获取应用程序的 injector,您需要从 Angular 正在处理的元素中获取它。例如,如果您的应用注册在您调用 injector = angular.element(document.body).injector() 的 body 元素上

然后从检索到的 injector 中,您可以使用 injector.get('ServiceName') 获得您喜欢的任何服务

有关此答案的更多信息:Can't retrieve the injector from angular
这里还有更多信息:Call AngularJS from legacy code

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


我也必须这样做才能使其工作。顺便说一句,angular.element('*[ng-app]').injector() 应该适用于所有情况。
如果执行 angular.element('html') 时出现错误“选择器未实现”,则可以使用 Chrome $0 功能。选择 html 元素,转到控制台并运行 angular.element($0).injector()
document 也有效:angular.element(document).injector().get('serviceName')
仅供参考,我必须在 chrome 上使用 document.body
仅供参考,我想使用 $location 服务,但最终我需要将它包装在 scope.apply 中。我知道这是有据可查的,但它让我忘记了。在一行中 angular.element(document).scope().$apply(angular.element(document).injector().get('$location').path('/my/angular/url'))
g
ganaraj

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

一个 )

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


当我执行 var $inj = angular.injector(['app']); 时,控制台会在一个应用程序中抛出 Error: Unknown provider: $filterProvider from app,在另一个应用程序中抛出 Error: Unknown provider: $controllerProvider from app...
@JustGoscha 您的应用程序是如何配置的?即一条线(看起来像)如何 var app = angular.module('app',[]);看起来像在您的应用程序中。
我没有完全理解这个问题..它看起来就像你说的 angular.module('app',[]); 然后在不同的文件中有服务、控制器等,它们都被定义为 angular.module('app').factory('FeatureRegistry',function(){//code here}); 例如
@JustGoscha 这是我为测试所做的。我在 chrome 中访问了 docs.angularjs.org/api。打开控制台。在我的答案的 a 部分输入代码,然后在 b 部分输入代码。你应该看到 Hello World 。你可以尝试吗?
@JustGoscha - 是的,这是因为它忽略了角度的生命周期。它在允许它运行之前不会等待服务被创建,所以如果服务是在注入器调用下声明的,它不会看到服务已经定义。
C
Community

@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.


F
Faiz Mohamed Haneef

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

https://i.stack.imgur.com/7GsCz.png