8

我的 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

看起来我做错了什么。

4

3 回答 3

11

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

<html ng-app="myApp">

您的服务缺少“this.”：

this.addNums = function(text) {

小提琴。

关于何时使用 service() 和 factory()，以及如何正确编码，Angular 社区似乎存在很多困惑。所以，这是我的简短教程：

service() 方法需要一个JavaScript 构造函数。许多使用 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 技术，例如将您的服务定义为咖啡脚本类。

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

于 2012-11-15T21:33:35.307 回答
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");
};
于 2012-11-15T16:02:44.243 回答
2

就像对布赖恩的回答的补充说明一样，如果您仍然希望代码调用 MyService.addNums 您可以使用以下内容：

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

    return result;
});

然后你仍然可以使用

MyService.addNums("abc");

如果你想这样做。  

于 2012-11-15T17:32:55.003 回答