本文翻译自：How can I test an AngularJS service from the console?

I have a service like: 我有这样的服务：

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

I would like to test it from the JavaScript console and call the function f1() of the service. 我想从JavaScript控制台测试它并调用服务的函数f1() 。

How can I do that? 我怎样才能做到这一点？

#1楼

参考：https://stackoom.com/question/139Uu/如何从控制台测试AngularJS服务

#2楼

First of all, a modified version of your service. 首先，您的服务的修改版本。

a ) 一个）

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

This returns an object, nothing to new here. 这会返回一个对象，这里没有任何新内容。

Now the way to get this from the console is 现在从控制台获取此功能的方法是

b ) b）

var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");

c ) C ）

One of the things you were doing there earlier was to assume that the app.factory returns you the function itself or a new'ed version of it. 你之前在那里做的事情之一是假设app.factory返回函数本身或它的新版本。 Which is not the case. 事实并非如此。 In order to get a constructor you would either have to do 为了得到一个构造函数，你要么必须这样做

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

This returns an ExampleService constructor which you will next have to do a 'new' on. 这将返回一个ExampleService构造函数，接下来您必须执行“new”操作。

Or alternatively, 或者，

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

This returns new ExampleService() on injection. 这会在注入时返回新的ExampleService（）。

#3楼

TLDR: In one line the command you are looking for: TLDR：在一行中您正在寻找的命令：

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

Deep dive 深潜

AngularJS uses Dependency Injection (DI) to inject services/factories into your components,directives and other services. AngularJS使用依赖注入（DI）将服务/工厂注入到组件，指令和其他服务中。 So what you need to do to get a service is to get the injector of AngularJS first (the injector is responsible for wiring up all the dependencies and providing them to components). 所以，你需要做的就是一个服务是什么让AngularJS的注射器第一（喷油器是负责接线了所有的依赖关系和它们提供给组件）。

To get the injector of your app you need to grab it from an element that angular is handling. 要获得应用程序的注入器，您需要从角度处理的元素中获取它。 For example if your app is registered on the body element you call injector = angular.element(document.body).injector() 例如，如果您的应用程序在body元素上注册，则调用injector = angular.element(document.body).injector()

From the retrieved injector you can then get whatever service you like with injector.get('ServiceName') 从检索到的injector您可以使用injector.get('ServiceName')获得您喜欢的任何服务

More information on that in this answer: Can't retrieve the injector from angular 在这个答案中有关于此的更多信息：无法从角度检索注射器
And even more here: Call AngularJS from legacy code 更重要的是：从遗留代码中调用AngularJS

Another useful trick to get the $scope of a particular element. 获取特定元素的$scope的另一个有用技巧。 Select the element with the DOM inspection tool of your developer tools and then run the following line ( $0 is always the selected element): 使用开发人员工具的DOM检查工具选择元素，然后运行以下行（ $0始终是所选元素）：
angular.element($0).scope()

#4楼

@JustGoscha's answer is spot on, but that's a lot to type when I want access, so I added this to the bottom of my app.js. @ JustGoscha的答案很明显，但是当我想要访问时要输入很多内容，所以我将它添加到app.js的底部。 Then all I have to type is x = getSrv('$http') to get the http service. 然后我要输入的是x = getSrv('$http')以获取http服务。

// @if DEBUG
function getSrv(name, element) {element = element || '*[ng-app]';return angular.element(element).injector().get(name);
}
// @endif

It adds it to the global scope but only in debug mode. 它将其添加到全局范围，但仅在调试模式下。 I put it inside the @if DEBUG so that I don't end up with it in the production code. 我把它放在@if DEBUG这样我就不会在生产代码中得到它了。 I use this method to remove debug code from prouduction builds. 我使用此方法从prouduction构建中删除调试代码。

#5楼

Angularjs Dependency Injection framework is responsible for injecting the dependancies of you app module to your controllers. Angularjs依赖注入框架负责将应用程序模块的依赖项注入控制器。 This is possible through its injector. 这可以通过其注射器实现。

You need to first identify the ng-app and get the associated injector. 您需要首先识别ng-app并获取相关的注射器。 The below query works to find your ng-app in the DOM and retrieve the injector. 以下查询用于在DOM中查找ng-app并检索注入器。

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

In chrome, however, you can point to target ng-app as shown below. 但是，在chrome中，您可以指向目标ng-app，如下所示。 and use the $0 hack and issue angular.element($0).injector() 并使用$0 hack并发出angular.element($0).injector()

Once you have the injector, get any dependency injected service as below 获得注入器后，获取任何依赖注入服务，如下所示

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

如何从控制台测试AngularJS服务？相关推荐

服务启动失败_将控制台程序转换为服务运行
移花接木在上一篇文章<限制程序只能同时启动一个实例-唯一>中,我们详细讨论了在Windows中,将软件设置为开机启动的方法.从而实现保护程序开机的时候自动保护服务的运行. 有的时候,我们 ...
restful服务端客户端_测试RESTful服务的客户端
restful服务端客户端开发使用RESTful Web API的应用程序可能意味着开发服务器和客户端. 为服务器端编写集成测试可以像使用Arquillian启动服务器一样容易,并且可以通过REST ...
前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
Doom流量回放工具导致的测试环境服务接口无响应的排查过程
Doom流量回放工具导致的测试环境服务接口无响应的排查过程现象描述: a)部分接口(A组接口)无响应 b)部分接口(B组接口)正常响应 c)还有一部分接口(C组接口),场景1无响应,场景2正常响应 ...
互联网晚报 | 1月13日星期四 | 恒驰5首车下线；抖音电商测试快递服务“音尊达”；中国移动10086 App月底停止运营...
今日看点 ✦ 中国移动10086 APP发布公告:将于1月30日停止运营 ✦ 恒驰5首车比原计划提前12天下线,恒驰汽车迎来重大里程碑 ✦ "春节也送货"第十年,京东物流为坚守岗位 ...
利用 telnet 命令测试 SMTP 服务（QQ邮箱发邮件）
文章目录 1 开通 QQ 邮箱的 SMTP 服务 2 开启 telnet 客户端 3 使用 CMD 利用 telnet 命令测试 SMTP 服务 1 开通 QQ 邮箱的 SMTP 服务 2.找到&qu ...
区块链测试网服务发布
官网注册登录:区块链服务网络BSN 为开发者打造的免费测试服务 1.下载链码包方法一登录进去后就先去开发者社区下载链码包,我下载的是secp256r1版本的然后改个名(不改也行) 方法二: 发布 ...
测试udp服务的端口是否可用
测试tcp服务的端口是否可用,可以使用: telnet ip port 但是如果这个用在upd服务上,就会报错, 因为telnet走的是tcp协议, 比如说192.168.80.131在8888端口上 ...
利用 telnet 命令测试 SMTP 服务（QQ邮箱）
文章目录开通QQ邮箱的SMTP服务开启telnet客户端使用CMD利用 telnet 命令测试 SMTP 服务开通QQ邮箱的SMTP服务首先要开启QQ邮箱的smtp服务,默认是关闭的. 1. ...

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

#1楼

#2楼

a ) 一个）

b ) b）

c ) C ）

#3楼

TLDR: In one line the command you are looking for: TLDR：在一行中您正在寻找的命令：

Deep dive 深潜

#4楼

#5楼

如何从控制台测试AngularJS服务？相关推荐

最新文章

热门文章

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

#1楼

#2楼

a ) 一个 ）

b ) b）

c ) C ）

#3楼

TLDR: In one line the command you are looking for: TLDR：在一行中您正在寻找的命令：

Deep dive 深潜

#4楼

#5楼

如何从控制台测试AngularJS服务？相关推荐

最新文章

热门文章

a ) 一个）