与AngularJS模块之间共享？ [英] sharing between modules with AngularJS?
本文介绍了与AngularJS模块之间共享？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
让我们说我有一个的东西模块，我希望注入对myApp 配置：
angular.module（'对myApp'，['东西']）。
配置（[功能（）{ }]）;
有两个子模块：
angular.module（东西，[stuff.thing1，stuff.thing2]）;
这是第一个：
angular.module（'stuff.thing1'，[]）。提供商（$ thing1功能（）{
变种globalOptions = {};
this.options =功能（值）{
globalOptions =价值;
};
这一点。$ GET ='$ HTTP'，函数（$ HTTP）{
功能Thing1（选）{
VAR自我=这一点，选择= this.options = angular.extend（{}，globalOptions，选择采用）;
}
Thing1.prototype.getOptions =功能（）{
的console.log（this.options.apiKey）;
};
返回{
thing1：功能（选）{
返回新Thing1（选）;
}
};
}];
}）;
和第二个是为便于例如相同的：
angular.module（'stuff.thing2'，[]）。提供商（$ thing2功能（）{
变种globalOptions = {};
this.options =功能（值）{
globalOptions =价值;
};
这一点。$ GET ='$ HTTP'，函数（$ HTTP）{
功能Thing2（选）{
VAR自我=这一点，选择= this.options = angular.extend（{}，globalOptions，选择采用）;
}
Thing2.prototype.getOptions =功能（）{
的console.log（this.options.apiKey）;
};
返回{
thing2：功能（选）{
返回新Thing2（选）;
}
};
}];
}）;
你将看到的是，你可以为供应商可配置选项访问他们两个：
angular.module（'对myApp'，['东西']）。
配置（['$ thing1Provider'，'$ thing2Provider'，函数（$ thing1Provider，$ thing2Provider）{
$ thing1Provider.options（{apiKey：01234569abcdef'}）;
$ thing2Provider.options（{apiKey：01234569abcdef'}）;
}]）;
如果我们是在一个控制器，你可以每范围覆盖，如：
控制器（'AppController的'，['$范围'，'$ thing1'，函数（$范围，$ thing1）{
变种thing1 = $ thing1.thing1（{apiKey：'3kcd894g6nslx83n11246'}）;
}]）。
但是，如果他们总是共享相同的属性？如何共享供应商之间的东西吗？
angular.module（'对myApp'，['东西']）。配置（['$东西'功能（$东西）{
//不知道我在做什么在这里，只是想画一幅画。
$ stuff.options（{apiKey：01234569abcdef'}）;
}]）;
我可以注入 $的东西和配置为共享属性 $ thing1 和 $ thing2 ？
我如何访问这两个 $ thing1 和 $ thing2 为单个模块的扩展？
控制器（'AppController的'，['$范围，$东西'，函数（$范围，$东西）{
//再次 - 不知道我在这里做，只是想画一幅画。 // $ thing1现在将覆盖超过$ stuff.options配置。
VAR thing1 = $ $东西thing1.thing1（{apiKey：lkjn1324123l4kjn1dddd'}）; //无需覆盖$ stuff.options，将使用任何上面所配置的。
VAR thing2 = $ $东西thing2.thing2（）。 //我能再次连更改默认为，如果我想要的吗？
$ stuff.options（{apiKey：uih2iu582b3idt31d2'}）;
}]）。
解决方案
注入模块到两个共享这些属性。
使用提供者类覆盖属性或从任何范围的实例化：
angular.module（stuff.things，[]）。提供商（$事，函数（）{
变种globalOptions = {};
this.options =功能（值）{
globalOptions =价值;
};
这一点。$ GET =，函数（）{
功能的东西（选）{
VAR自我=这一点，选择= this.options = angular.extend（{}，globalOptions，选择采用）;
}
Things.prototype.returnOptions =功能（）{
返回this.options;
};
返回{
东西：功能（选）{
返回新的东西（选）;
}
};
}];
}）;
秘决： $ things.things（）returnOptions（）
angular.module（'stuff.thing1'，['stuff.things']）。提供商（$ thing1功能（）{
变种globalOptions = {};
this.options =功能（值）{
globalOptions =价值;
}; 这一点。$ GET ='$的东西'，函数（$东西）{
功能Thing1（选）{
VAR自我=这一点，选择= this.options = angular.extend（{} $ things.things（）returnOptions（），globalOptions，选择采用。）;
...
}
返回{
thing1：功能（选）{
返回新Thing1（选）;
}
};
}];
}）;
Let's say I have a stuff module that I want to inject into myApp config:
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?
How do I access both $thing1 and $thing2 as an extension of a single module?
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:
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()
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);
}
};
}];
});
这篇关于与AngularJS模块之间共享？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
