AngularJS 中模块依赖和服务依赖的区别
Difference between module dependency and service dependency in AngularJS
我不明白模块依赖和服务依赖有什么区别。例如,
angular.module('components.users', [])
.controller('UsersController', function(Users) {
//...
})
angular.module('api.users', [])
.factory('Users', function() {
//...
});
我不明白为什么 Users
服务可以在 components.users
的控制器方法中传递,因为 component.users
模块不需要任何模块。 (我认为 api.users
模块应该在模块方法中作为必需模块之一传入)。
换句话说...
模块依赖和服务依赖有什么区别?
为什么即使不需要定义的模块,服务也可用?
模块之间的依赖关系指定了每个模块(想象一个模块是一个功能包)如何需要其他模块提供的某些功能。
服务依赖性是某物(控制器、服务等)需要特定服务才能工作的方式。
这些是相关的。如果控制器(即)需要另一个模块中的服务,您可以在此处证明模块依赖性和服务依赖性。如果后面提到的服务在同一个模块内。控制器的模块不必依赖于另一个模块。
想象一下:
- 模块A
- 功能 1(服务 1)
- 功能2(服务2)
- 模块B
- 功能3(服务3)
- 功能4(服务4)
如果Functionality1
需要Functionality2
,它可以使用它而不需要ModuleA
导入ModuleB
,因为它们在同一个模块中。现在如果Functionality2
需要Functionality4
,ModuleA
需要导入ModuleB
所以Functionality4
可以带入"scope"(作为一般意义上的单词,不要与 ModuleA
.
的 $scope
) 混淆
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
工厂或者在api.users
模块中导入api.users
模块=30=].
选项 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>
每当您执行 angular.module
时,它都会成为一个单独的模块。
假设您住在公寓里,每栋房子都是一个模块。每个房子都有自己的房间(服务)等
所以当你想进入别人家的房间时,你需要征得别人家的许可。在这种情况下,您将注入特定模块,然后只有您才能访问它。
您可以检查您是否正在使用您团队的现有代码库,他们是否定义了包含您定义的 'Users' 服务的根或基础 'app' 模块。下面是一个示例,说明这在您的项目中如何运作以及您为何能够使用 'Users' 服务:
<!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>
我不明白模块依赖和服务依赖有什么区别。例如,
angular.module('components.users', [])
.controller('UsersController', function(Users) {
//...
})
angular.module('api.users', [])
.factory('Users', function() {
//...
});
我不明白为什么 Users
服务可以在 components.users
的控制器方法中传递,因为 component.users
模块不需要任何模块。 (我认为 api.users
模块应该在模块方法中作为必需模块之一传入)。
换句话说...
模块依赖和服务依赖有什么区别?
为什么即使不需要定义的模块,服务也可用?
模块之间的依赖关系指定了每个模块(想象一个模块是一个功能包)如何需要其他模块提供的某些功能。
服务依赖性是某物(控制器、服务等)需要特定服务才能工作的方式。
这些是相关的。如果控制器(即)需要另一个模块中的服务,您可以在此处证明模块依赖性和服务依赖性。如果后面提到的服务在同一个模块内。控制器的模块不必依赖于另一个模块。
想象一下:
- 模块A
- 功能 1(服务 1)
- 功能2(服务2)
- 模块B
- 功能3(服务3)
- 功能4(服务4)
如果Functionality1
需要Functionality2
,它可以使用它而不需要ModuleA
导入ModuleB
,因为它们在同一个模块中。现在如果Functionality2
需要Functionality4
,ModuleA
需要导入ModuleB
所以Functionality4
可以带入"scope"(作为一般意义上的单词,不要与 ModuleA
.
$scope
) 混淆
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
工厂或者在api.users
模块中导入api.users
模块=30=].
选项 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>
每当您执行 angular.module
时,它都会成为一个单独的模块。
假设您住在公寓里,每栋房子都是一个模块。每个房子都有自己的房间(服务)等
所以当你想进入别人家的房间时,你需要征得别人家的许可。在这种情况下,您将注入特定模块,然后只有您才能访问它。
您可以检查您是否正在使用您团队的现有代码库,他们是否定义了包含您定义的 'Users' 服务的根或基础 'app' 模块。下面是一个示例,说明这在您的项目中如何运作以及您为何能够使用 'Users' 服务:
<!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>