Question

我的app.js包含

var app = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider, $http) {
    ...
}]);

服务看起来像

app.service('MyService', function () {
    addNums = function (text) {
        return text + "123";
    }
});

在控制器中我有

function adminCtrl ($scope, MyService) {
    $scope.txt = MyService.addNums("abc");
};

它们都在单独的文件中。问题是我收到了错误 Unknown provider: MyServiceProvider <- MyService

看起来我做错了。

Answer 1

如果您忘记告诉Angular加载myApp模块，可能会发生提供程序错误。例如，你在index.html文件中有这个吗？：

<html ng-app="myApp">

您的服务缺少“这个。”：

this.addNums = function(text) {

Fiddle

Angular社区似乎有很多关于何时使用service（）vs factory（）以及如何正确编码它们的混淆。所以，这是我的简短教程：

service() method需要JavaScript constructor function。许多使用service（）的Angular代码示例包含的代码不是构造函数。通常，他们返回一个对象，这种方式违背了使用service（）的目的 - 更多关于下面的内容。如果需要创建并返回一个对象，则可以使用factory（）代替。通常，只需要构造函数，并且可以使用service（）。

以下引用来自不同的AngularJS Google Group帖子：

使用factory（）和service（）之间的主要区别是factory（）   必须返回一个对象，而service（）除了它之外不返回任何内容   必须是对象构造函数。

如果您提供的功能构建您的对象，请使用factory（）   想。即，Angular基本上会做到   obj = myFactory（）
得到obj。如果您提供的功能是，请使用service（）   您想要的对象的构造函数。即，Angular基本上会做到   obj = new myService（）
获取/实例化obj。

因此，当人们使用service（）并且其代码“返回”一个对象时，由于JavaScript“new”的工作方式，它有点浪费：“new”将首先创建一个全新的JavaScript对象（然后执行原型的东西，然后调用myService（）等定义的函数 - 这里我们并不真正关心的细节），但是因为myService（）定义的函数返回它自己的对象，“new”做了一个出价的东西奇怪：抛弃了对象只是花时间创建并返回myService（）函数创建的对象，因此“浪费”。

引入service（）的原因之一是让它变得简单使用“经典”OO技术，例如将您的服务定义为 coffeescript class。

此外，服务的未记录命名约定似乎是camelCase，首字母小写：例如，myService。

Answer 2

您需要在app.service回调中返回addNums。

app.service('MyService', function () {
  addNums = function (text) {
    return text + "123";
  }
  return addNums;
});

现在，只要您使用MyService，angular就会返回要使用的addNums函数。

因此，您应该在控制器中使用它（请注意，没有addNums调用）：

function adminCtrl ($scope, MyService) {
  $scope.txt = MyService("abc");
};

Answer 3

正如对Brian的答案的补充澄清一样，如果您仍想让您的代码调用MyService.addNums，您可以使用以下内容：

app.service('MyService', function() {
    var result = {};
    result.addNums = function (text) {
        return text + "123";
    };

    return result;
});

然后你仍然可以使用

MyService.addNums("abc");

如果你想这样做的话。

AngularJS服务在单独的文件中

3 个答案: