使用AngularJS实现模块间的共享
sharing between modules with AngularJS?
假设我有一个stuff
模块,我想注入myApp
配置:
angular.module('myApp', ['stuff']).
config([function() {
}]);
有两个子模块:
angular.module("stuff", ["stuff.thing1","stuff.thing2"]);
第一个:
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);
}
};
}];
});
第二个是相同的,为了方便示例:
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);
}
};
}];
});
你会注意到,你可以访问它们作为提供商来配置选项:
angular.module('myApp', ['stuff']).
config(['$thing1Provider', '$thing2Provider', function($thing1Provider, $thing2Provider) {
$thing1Provider.options({apiKey:'01234569abcdef'});
$thing2Provider.options({apiKey:'01234569abcdef'});
}]);
如果我们在一个控制器中,你可以覆盖每个作用域,如:
controller('AppController', ['$scope','$thing1', function($scope, $thing1) {
var thing1 = $thing1.thing1({apiKey:'3kcd894g6nslx83n11246'});
}]).
但是如果它们总是共享相同的属性呢?如何在提供者之间共享内容?
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'});
}]);
是否可以注入$stuff
并为$thing1
和$thing2
配置共享属性?
我如何访问$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'});
}]).
注入一个共享这些属性的模块。
使用提供程序类覆盖属性或从任何作用域实例化它们:
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);
}
};
}];
});
秘笈:$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);
}
};
}];
});
相关文章:
- NodeJS 是否重用已经加载的模块并共享其值?
- 如何在 Angularjs 中的交叉模块之间共享数据
- 节点模块对象范围:在所有函数之间共享一个对象
- 负载角度依赖关系之间的区别是什么,共享模块的最佳方式是什么
- 如何在模块之间共享对象
- 在模块之间共享的事件发射器
- 如何在 AngularJS 中的两个独立模块之间共享数据
- RequireJS:如何处理浏览器和服务器之间共享的代码的不同模块依赖关系
- 跨多个角度模块共享数据、事件
- 什么被认为是在节点模块中共享“全局”变量的好方法
- Angular - 如何在模块之间共享控制器
- 在两个不同的模块和两个不同的js文件之间共享服务
- 推荐的组织共享模块 browserify/nodejs 的方法
- GWT:在同一模块的实例之间共享信息
- JavaScript - 如何注入不同的函数实现,例如 alert(与 web 和 Node 共享模块.js服务器端)
- 具有共享模块的类的多个实例
- 如何在Node中的两个文件之间共享模块私有数据
- Browserify+Backbone.js“ApplicationState”共享模块
- 在AngularJs中共享模块
- 解析和共享模块中的obj资源