AngularJS服务独立于多个页面上的模块

时间:2013-12-08 00:34:36

标签: javascript angularjs angularjs-service

我的角度应用程序后面的数据库中有一个用户表。我将单独的登录,注册和用户管理视图作为单独的页面。

我想定义一个服务,在加载用户对象时保留它们的列表。如果从数据库中查询新用户,则应将该记录传递给服务,并且该服务应返回现有对象(如果可用),否则创建新对象。此外,该服务应该能够在指示时禁用未使用的对象,并且这些对象应该设置为未初始化的用户对象。如果随后调用create,则应该只设置旧对象,而不是创建新对象。

我还想定义一个定义用户对象的服务(但是,它不应该被称为服务?)。这样,用户将不仅仅是一个经过解析的JSON对象,而且还将使用方法进行修饰,以跟踪任何修改并提交或恢复这些更改。

因为我有单独的页面都使用用户对象。我想在每个页面上包含这些服务。根据AngularJS文档,要注册服务,我需要执行以下操作:

var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

然而,这项服务是(据我所知)内联。我不想复制和粘贴代码。我想在一个单独的文件中定义服务。该服务应该不知道调用它的模块。应该存在附加到模块。

我尝试使用以下语法创建单独的文件services/user.js

$provide.service('users', UserService);

这显然没什么好处,因为$ offer未定义。但是,我不知道如何将$provide依赖项注入服务而不将其附加到模块。

有没有办法定义独立于模块的服务?有没有办法定义一个模型,用模型特定的功能装饰,独立于模块或服务?

2 个答案:

答案 0 :(得分:8)

您无法拥有孤儿服务。但是,这是 modules 解决的确切问题。

您想要定义一个包含此服务的myBackend模块,然后在您要使用该服务的任何应用中依赖此模块。

myBackend 模块:

var myBackend = angular.module('myBackend', []);
myBackend.factory('backendSerivce', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

您想要使用该服务的地方:

var myModule = angular.module('myModule', [ 'myBackend' ]);

myModule.controller('myShinyController', function (backendService) {
  // ...
});

现在,您可以使各种应用程序无视对象的JSON表示,只返回服务中的User个对象。

答案 1 :(得分:5)

单独的模块绝对是可行的方法。但是,如果您出于某种原因在单独的时间加载文件,则可以通过主模块配置块公开$ provide。这可能类似于:

var myApp = angular.module('myApp',[]);
myApp.config(function($controllerProvider,$filterProvider,$compileProvider,$provide){
    myApp.register =
        {
            controller: $controllerProvider.register,
            directive: $compileProvider.directive,
            filter: $filterProvider.register,
            factory: $provide.factory,
            service: $provide.service,
            constant: $provide.constant
        };
});

然后在任何后续加载的文件中,您可以访问myApp.register... factory..service ..等。如果您使用angular + require js

,这通常是使用的技术