AngularJS中模块依赖和服务依赖之间的区别

时间:2018-08-03 19:02:00

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

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

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

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

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

换句话说...

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

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

3 个答案:

答案 0 :(得分:1)

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

服务依赖关系是某些东西(控制器,服务等)需要特定服务才能工作的方式。

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

所以想象一下:

  1. 模块A
    • 功能1( Service1
    • 功能2( Service2
  2. 模块B
    • 功能3( Service3
    • 功能4( Service4

如果Functionality1需要Functionality2,则可以使用它而无需ModuleA导入ModuleB,因为它们在同一模块中。现在,如果Functionality2需要Functionality4,则ModuleA需要导入ModuleB,以便可以将Functionality4带入“作用域”(用作该词的一般含义,不要与ModuleA的{​​{3}})混淆。

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>

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

选项1:在同一Users模块中声明components.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:将api.users模块导入components.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>

答案 1 :(得分:1)

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

<!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>

答案 2 :(得分:0)

每次您 angular.module 时,它都会变成一个单独的模块。

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

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