在angularjs控制器中调用全局javascript函数的可测试方法

Question

非常全局描述

您拥有必须存在于全局范围内的功能。您想要一种以依赖注入方式封装这些函数的功能的方法，以便它们更易于测试。这样做的正确方法是什么？

某些特定描述

我有一种情况，我有一个现有的javascript库，它在全局范围内使用了很多变量和函数。该库是SCORM引擎，标准的一部分规定这些函数必须在全局范围内可用（因此用户创建的内容可以访问它们）。

但是，在各种控制器中有几个地方我也必须称之为。目前我只是打电话给他们，但这使得测试这些线条变得困难，并且似乎违反了一般的角度思维模式。

Plnkr

A plunk just illustrating how things are now

var globalVariable = 1;

function globalFunction(){
  return "cats";
}

var app = angular.module('plunker', []);

app.controller('MainCtrl', [ '$scope', function($scope) {
  $scope.name = 'World';
  $scope.cats = globalFunction(); //This line is hard to test and makes me feel dirty.
}]);

A plunk that wraps the function in a factory (maybe what is recommended in comments?)

var globalVariable = 1;

function globalFunction(){
  return "cats";
}

var app = angular.module('plunker', []);

app.factory('angularFriendly', function(){
  this.globalFunction = globalFunction;
  return this;
});

app.controller('MainCtrl', ['$scope', 'angularFriendly',
  function($scope, angularFriendly) {
    $scope.name = 'World';
    $scope.cats = angularFriendly.globalFunction();
  }
]);

当我说我考虑将其包装在服务中时，这或多或少是我在原始评论中的意思。我使函数可注入（这是好的，并且更可测试）但我不确定这是好的做法（因为我刚刚将难以测试的代码移到了不同​​的地方）。

Answer 1

我更喜欢将第三方非Angular应用程序包装到值对象中（这在功能上与使用工厂相同，并且在注入之前立即调用它，感觉更干净）。

var globalVariable = 1;

function globalFunction(){
  return "cats";
}

var app = angular.module('plunker', []);
app.value('external', globalFunction);

app.controller('MainCtrl', ['$scope', 'external',
  function($scope, external) {
    $scope.name = 'World';
    $scope.cats = external();  // Treat the dependency as a service to resolve into the scope
  }
]);