【问题标题】:Difference between module dependency and service dependency in AngularJSAngularJS中模块依赖和服务依赖的区别
【发布时间】:2019-01-11 16:53:24
【问题描述】:

我不明白模块依赖和服务依赖有什么区别。例如,

angular.module('components.users', [])
    .controller('UsersController', function(Users) {
        //...
}) 

angular.module('api.users', [])
  .factory('Users', function() {
        //...
});

我不明白为什么Users 服务可以在components.users 的控制器方法中传递,因为component.users 模块不需要任何模块。 (我认为api.users 模块应该在模块方法中作为必需模块之一传入)。

换句话说……

模块依赖和服务依赖有什么区别?

为什么即使不需要定义的模块也可以使用服务?

【问题讨论】:

    标签: angularjs dependency-injection angularjs-module angularjs-injector


    【解决方案1】:

    模块之间的依赖关系指定每个模块(想象一个模块是一个功能包)如何需要其他模块提供的某些功能。

    服务依赖性是指某物(控制器、服务等)需要特定服务才能工作的方式。

    这些是相关的。如果控制器(即)需要另一个模块中的服务,您可以在这里证明模块依赖性和服务依赖性。如果后面提到的服务在同一个模块内。控制器的模块不必依赖另一个模块。

    想象一下:

    1. 模块A
      • 功能1(服务1
      • 功能2(服务2
    2. 模块 B
      • 功能3 (服务3)
      • 功能4 (服务4)

    如果Functionality1需要Functionality2,它可以使用它而不需要ModuleA需要导入ModuleB,因为它们在同一个模块中。现在如果Functionality2 需要Functionality4ModuleA 需要导入ModuleB 所以Functionality4 可以带入“范围”(用作这个词的一般意义,不要与$scope 混淆)的ModuleA.

    AngularJS 中的每个模块都使用angular.module('name', []) 声明(注意括号)。并且每个模块(一旦创建)都可以使用angular.module('name') 定位(注意没有括号)。

    由于UsersController(在components.users 模块中声明)需要Users 工厂(在api.users 模块中声明)并且components.users 模块不导入api.users,因此您提供的代码应该不起作用。

    看下面(代码明显失败)

    angular.module('components.users', [])
      .controller('UsersController', function(Users) {
        console.log(Users);
      })
    
    angular.module('api.users', [])
      .factory('Users', function() {
        return this;
      });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <span ng-app="components.users" ng-controller="UsersController"></span>

    为了使其正常工作,您可以在同一 components.users 模块中声明 Users 工厂或在 components.users 中导入 api.users 模块。

    选项 1:在同一个 components.users 模块中声明 Users

    // create the module
    angular.module('components.users', [])
      .controller('UsersController', function(Users) {
        console.log(Users);
      })
    
    // locate the module
    angular.module('components.users')
      .factory('Users', function() {
        return this
      });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <span ng-app="components.users" ng-controller="UsersController"></span>

    选项 2:在 components.users 中导入 api.users 模块

     
    // create the module with a dependency to `api.users`
    angular.module('components.users', ['api.users'])
      .controller('UsersController', function(Users) {
        console.log(Users);
      })
    
    // create an independent module `api.users`
    angular.module('api.users', [])
      .factory('Users', function() {
        return this
      });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <span ng-app="components.users" ng-controller="UsersController"></span>

    【讨论】:

      【解决方案2】:

      每当您执行 angular.module 时,它都会成为一个单独的模块。

      假设您住在公寓里,每间房子都是一个模块。每个房子都有自己的房间(服务)等。

      因此,当您想访问其他房屋的房间时,您需要请求其他房屋的许可。在这种情况下,您将注入特定模块,然后只有您能够访问它。

      【讨论】:

        【解决方案3】:

        您可以检查您是否正在使用团队的现有代码库,他们已经定义了包含您定义的“用户”服务的根或基本“应用程序”模块。下面是一个示例,说明这可能如何在您的项目中发挥作用,以及为什么您能够使用“用户”服务:

        <!DOCTYPE html>
        <html ng-app="app">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <div ng-controller="controller">
                {{ text }}
            </div>
            <script src="angular.js"></script>
            <script type="text/javascript">
            angular.module('services',[])
                .factory('service',function(){
                    return {
                        text: "this is a string value defined in a service."
                    }
                })
            ;
            angular.module('controllers',[])
                /*
                  Here the service "service" is being used however
                  has not been specified in it's containing module.
                */
                .controller('controller',function($scope,service){
                    $scope.text = service.text;
                });
            ;
            /*
              The above works because in some way all services and controllers
              have been defined. In this example by manually specifying each.
            */
            angular.module('app',['services','controllers']);
            </script>
        </body>
        </html>
        

        【讨论】:

          猜你喜欢
          • 2018-10-20
          • 1970-01-01
          • 2015-10-06
          • 2014-04-28
          • 2021-11-02
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多