将模块功能注入AngularJS服务

时间:2014-11-21 05:58:07

标签: angularjs

我一直在阅读这两个链接1enter link description here。我们的想法是拥有干净的模块代码。

上面链接中解释的模块化方法建议使用该函数的文件,另一个文件用于将函数注入角度directivecontroller,....

举个例子:

/* app.js */
define([
    '/path/to/controller',
    '/path/to/service1'
], function(MyController, MyService1))
{
    "use strict";

    angular
        .module('myApp', [])
        .controller('MyController', MyController)
        .factory('MyService1', MyService1);
});

/* controller */
define(function()
{
    "use strict";

    return ['$scope', 'MyService1', MyController];

    function MyController($scope, MyService1) 
    {
        /* Now do your coding here */
    }
});

/* service */
// Identical to controller

请注意这个函数是如何在一个文件中实现的,然后注入到angular中。

现在,我可以看到一个潜在的问题是您的服务自定义依赖于另一个自定义服务。说MyService2也使用MyService1。我的两项服务现在看起来像:

/* MyService1 */
define(function() {
    return MyService1;

    function MyService1() {
        /* Code Here */
    }
});

/* MyService2 */
define(function() {
    return ['MyService1', MyService2];

    function MyService2(MyService1) {
        /* This uses MyService1 here */
    }
});

如果您的应用同时使用两者,那么一切都很好,但是,如果只使用一个,那么我们就会遇到问题:

/* This will work fine */
angular
    .module('myApp')
    .controller('MyController', MyController)
    .factory('MyService1', MyService1)
    .factory('MyService2', MyService2);

/* This will NOT */
angular
    .module('myApp')
    .controller('MyController', MyController)
    .factory('MyService2', MyService2);       <-- This guy internally requires MyServce1

我还没有看到如何在保持这种方法的同时解决这个问题。你能帮忙吗?

2 个答案:

答案 0 :(得分:0)

我看到你在那里使用requirejs所以你有两个并行的依赖框架(angular和requirejs)

当您定义一个依赖于MyService2的文件时,MyService2需要定义与MyService1的依赖关系(requirejs依赖关系),因此这两个文件都已加载并可用。 这解决了requirejs文件加载的问题。

现在有角度:你在MyService1中做

angular.factory('MyService1', function () {....});

比有角度知道该服务,并可以将其注入任何需要它的人。 对于你做的MyService2,

angular.factory('MyService2', ['MyService1', function(MyService1) {...}]).

现在将MyService1注入MyService2,你可以在服务1中使用它。

比在某些控制器中你只需要服务2

angular.controller('MyController', ['MyService2', function(MyService2){...}]);

和angular注入已经注入服务1的服务2。

答案 1 :(得分:0)

RequireJS和AngularJS有两个非重叠的依赖关系解析机制。如果您真的要同时使用这两者,正如linked guide中所建议的那样(我很难想象一个有用的场景),你需要记住,那个个人&#34;服务文件&#34;根本不包含服务。它们只包含它们的构造函数/工厂。总而言之,您的模块定义需要解决两个不同的问题:

  1. 使用service / controller / ...定义和
  2. 所需的构造函数/工厂加载所有文件
  3. 定义您不想作为外部依赖项留下的所有内容。
  4. 换句话说,如果您定义的模块只包含service2,其service1依赖关系,并且不定义service1,那么service1就会变为service1模块的外部依赖关系(不能在未定义{{1}}的环境中使用。)


    换句话说,这两个DI框架不会相互补充,因此只有当您需要首次注入(在Angular中)时,才能加载包含服务的文件。您可以找到一种方法来使用RequireJS按需加载某些东西(很可能是完全独立的Angular应用程序)。但是您无法按需加载服务/控制器/ ...(在运行时),因为这些事情只能在AngularJS应用程序构造的配置阶段中定义。一旦运行阶段启动,就不能再进行配置(例如服务定义)。

    如果您只是想使用模块化代码创建单个应用程序,我建议您暂时离开RequireJS并专注于简单地创建模块化代码,如style guide所示。