假设我有一个stuff要注入到myAppconfig中的模块:
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吗?
$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()
$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); } }; }]; });