AngularJS 服务在单独的文件中答案

【问题标题】：AngularJS service in separate fileAngularJS 服务在单独的文件中
【发布时间】：2012-11-03 22:40:06
【问题描述】：

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

看来我做错了什么。

【问题讨论】：

你应该使用this.addNums = function (text)而不是addNums = function (text)。

标签： javascript model-view-controller angularjs project-structure

【解决方案1】：

您需要在 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");
};

【讨论】：

A service() 不应该真正返回任何东西——它应该定义一个构造函数（如果有兴趣，请参阅我的答案以获取更多信息）。

【解决方案2】：

作为对 Brian 回答的补充说明，如果您仍然希望代码调用 MyService.addNums，您可以使用以下代码：

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

    return result;
});

那么你仍然可以使用

MyService.addNums("abc");

如果你想这样做。

【讨论】：

【解决方案3】：

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

<html ng-app="myApp">

您的服务缺少“this”。

this.addNums = function(text) {

Fiddle.

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

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 = 新的 myService()
获取/实例化 obj。

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

引入 service() 的原因之一是为了让它变得简单使用“经典”OO 技术，例如将您的服务定义为咖啡脚本类。

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

【讨论】：

最终还是决定使用factory。
小提琴没有显示如何在 separate 文件中定义服务，如问题中所述。
引入 service() 的原因之一是为了便于使用“经典”OO 技术，例如将您的服务定义为咖啡脚本类。 这似乎描述factory() 而不是service()，因为当您使用前者时，您应该自己构造对象，因此您有机会使用您想要的任何类。你自己写如果需要创建一个对象并返回，那么可以使用 factory() 代替。（强调我的）。