[英]sharing between modules with AngularJS?
Let's say I have a stuff
module that I want to inject into myApp
config: 假设我有一个我要注入
myApp
配置的stuff
模块:
angular.module('myApp', ['stuff']).
config([function() {
}]);
There are two submodules: 有两个子模块:
angular.module("stuff", ["stuff.thing1","stuff.thing2"]);
Here's the first: 这是第一个:
angular.module('stuff.thing1', []).provider("$thing1", function(){
var globalOptions = {};
this.options = function(value){
globalOptions = value;
};
this.$get = ['$http',function ($http) {
function Thing1(opts) {
var self = this, options = this.options = angular.extend({}, globalOptions, opts);
}
Thing1.prototype.getOptions = function(){
console.log(this.options.apiKey);
};
return {
thing1: function(opts){
return new Thing1(opts);
}
};
}];
});
And the second is identical for ease of example: 第二个是相同的,例如:
angular.module('stuff.thing2', []).provider("$thing2", function(){
var globalOptions = {};
this.options = function(value){
globalOptions = value;
};
this.$get = ['$http',function ($http) {
function Thing2(opts) {
var self = this, options = this.options = angular.extend({}, globalOptions, opts);
}
Thing2.prototype.getOptions = function(){
console.log(this.options.apiKey);
};
return {
thing2: function(opts){
return new Thing2(opts);
}
};
}];
});
What you will notice is that you can access both of them as providers to configure options: 您将注意到,您可以作为提供程序访问它们以配置选项:
angular.module('myApp', ['stuff']).
config(['$thing1Provider', '$thing2Provider', function($thing1Provider, $thing2Provider) {
$thing1Provider.options({apiKey:'01234569abcdef'});
$thing2Provider.options({apiKey:'01234569abcdef'});
}]);
If we were in a controller, you could overwrite per scope like: 如果我们在控制器中,您可以覆盖每个范围,如:
controller('AppController', ['$scope','$thing1', function($scope, $thing1) {
var thing1 = $thing1.thing1({apiKey:'3kcd894g6nslx83n11246'});
}]).
But what if they are always sharing the same property? 但是,如果他们总是共享相同的财产呢? How do I share something between providers?
如何在提供商之间分享内容?
angular.module('myApp', ['stuff']).config(['$stuff' function($stuff) {
//No idea what I'm doing here, just trying to paint a picture.
$stuff.options({apiKey:'01234569abcdef'});
}]);
Can I inject $stuff
and config a shared property for both $thing1
and $thing2
? 我可以为
$thing1
和$thing2
注入$stuff
并配置共享属性吗?
How do I access both $thing1
and $thing2
as an extension of a single module? 如何访问
$thing1
和$thing2
作为单个模块的扩展?
controller('AppController', ['$scope','$stuff', function($scope, $stuff) {
//Again - no idea what I'm doing here, just trying to paint a picture.
//$thing1 would now be overwrite $stuff.options config above.
var thing1 = $stuff.$thing1.thing1({apiKey:'lkjn1324123l4kjn1dddd'});
//No need to overwrite $stuff.options, will use whatever was configured above.
var thing2 = $stuff.$thing2.thing2();
//Could I even change the default again for both if I wanted too?
$stuff.options({apiKey:'uih2iu582b3idt31d2'});
}]).
Inject a module into both that shares these properties. 将模块注入共享这些属性的模块。
Use the provider class to overwrite properties or instantiate them from any scope: 使用provider类覆盖属性或从任何范围实例化它们:
angular.module("stuff.things", []).provider("$things", function(){
var globalOptions = {};
this.options = function(value){
globalOptions = value;
};
this.$get = [, function () {
function Things(opts) {
var self = this, options = this.options = angular.extend({}, globalOptions, opts);
}
Things.prototype.returnOptions = function(){
return this.options;
};
return {
things: function(opts){
return new Things(opts);
}
};
}];
});
The secret sauce: $things.things().returnOptions()
秘诀:
$things.things().returnOptions()
angular.module('stuff.thing1', ['stuff.things']).provider("$thing1", function(){
var globalOptions = {};
this.options = function(value){
globalOptions = value;
};
this.$get = ['$things', function ($things) {
function Thing1(opts) {
var self = this, options = this.options = angular.extend({}, $things.things().returnOptions(), globalOptions, opts);
...
}
return {
thing1: function(opts){
return new Thing1(opts);
}
};
}];
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.