如何以正确的方式将普通 javascript 函数添加到 angular 服务？

Question

我创建了 angular 服务，用于存储我较旧的非 angular javascript 函数：

myApp.service('utils', function() {
  return {
    fun1: function(a, b, c, d) {
      var x = a + b + c + d;
      return x;
    },
    fun2: function() {
      var x = fun1(1, 1, 1, 1);
      return x;
    }
  };
});

如果我在控制器中调用 utils.fun2()：

myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', 'utils', function($scope, utils) {
  $scope.someNumber = utils.fun2();
}]);

我收到一个错误：

Error: fun1 is not defined

我的问题是，如何重写它才能正常工作（不污染全局命名空间）？将现有 Javascript 功能包含到新 angular 应用程序的最佳方法是什么？

Answer 1

你的想法是对的。

问题在于，对于服务，您正在注入传递给定义的确切函数。所以你需要先调用注入的函数才能看到那些方法。您也可以按如下方式更改服务定义：

myApp.service('utils', function() {
this.fun1 = function(a, b, c, d) {
  var x = a + b + c + d;
  return x;
};
this.fun2 = function() {
  var x = fun1(1, 1, 1, 1);
  return x;
};
});

此外，您可以将实用程序从 'service' 更改为 'factory'，这样您的代码就可以运行了。

阅读 angular 文档中的服务和工厂之间的区别。

Answer 2

尝试像这样设置您的服务：

myApp.service('utils', function() {

    var fun1 = function(a, b, c, d) {
        var x = a + b + c + d;
        return x;
    };

    var fun2 = function() {
        var x = fun1(1, 1, 1, 1);
        return x;
    };

    return {
        fun1: fun1,
        fun2: fun2
    };
});

Answer 3

尝试使用工厂并理解difference between factory and service。

您的代码将适用于这些修改：

Live JSFiddle

angular.module('myModule', [])

.factory('utilsFactory', function() {
//function definition
var fun1 = function(a, b, c, d) {
    var x = a + b + c + d;
    return x;
};
//function definition
var fun2 = function() {
    var x = fun1(1, 1, 1, 1);
    return x;
};
//return functions after the injection
return {
    fun1: fun1,
    fun2: fun2
};
})

.controller('myController', ['$scope', 'utilsFactory', function($scope, utilsFactory) {
  $scope.someNumber = utilsFactory.fun2();
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myModule' ng-controller='myController'>
  someNumber  = {{ someNumber }}
</div>

如何以正确的方式将普通 javascript 函数添加到 angular 服务？

How to add plain javascript functions to angular service the right way?

angularjs

angular-services