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

2018-06-04 02:49:51

我有这样的服务：

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

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

我怎样才能做到这一点？

所以我发现如果已经存在一个注入器，你不能简单地调用angular.injector(['app']) 。因为此功能试图创建一个新的注入器。

相反，你必须调用injector = angular.element(document.body).injector()

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

所以在一行中 ，命令看起来像这样：

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

有关此答案的更多信息：无法从角度检索喷油器
甚至更多：从传统代码中调用Angular JS

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

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

一个）

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

这会在注入时返回新的ExampleService（）。

@ 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构建中删除调试代码。

链接地址: http://www.djcxy.com/p/13589.html

上一篇: How can I test an AngularJS service from the console?

下一篇: How do I use $scope.$watch and $scope.$apply in AngularJS?

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

一个 ）

b）

C ）

一个）