współdzielenie modułów z AngularJS?

Question

Powiedzmy mam stuff moduł, który chcę wprowadzić do myApp config:

angular.module('myApp', ['stuff']). 
    config([function() { 

    }]); 

Istnieją dwa Submoduły:

angular.module("stuff", ["stuff.thing1","stuff.thing2"]); 

Oto pierwszy:

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); 
      } 
     }; 
    }]; 
}); 

A drugi jest identyczny dla łatwego przykładu:

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); 
      } 
     }; 
    }]; 
}); 

Co można zauważyć, jest to, że można uzyskać dostęp do obu z nich jako dostawców, aby skonfigurować opcje:

angular.module('myApp', ['stuff']). 
    config(['$thing1Provider', '$thing2Provider', function($thing1Provider, $thing2Provider) { 
    $thing1Provider.options({apiKey:'abcdef'}); 
    $thing2Provider.options({apiKey:'abcdef'}); 
    }]); 

Gdybyśmy byli w sterowniku, można nadpisać za zakresu jak:

controller('AppController', ['$scope','$thing1', function($scope, $thing1) {  
    var thing1 = $thing1.thing1({apiKey:'3kcd894g6nslx83n11246'}); 
}]). 

Ale co, jeśli zawsze dzielą tę samą nieruchomość? Jak udostępnić coś między dostawcami?

angular.module('myApp', ['stuff']).config(['$stuff' function($stuff) { 
    //No idea what I'm doing here, just trying to paint a picture. 
    $stuff.options({apiKey:'abcdef'}); 
}]); 

mogę wstrzyknąć $stuff i config wspólnej działce zarówno $thing1 i $thing2?

Jak uzyskać dostęp zarówno do $thing1 jak i $thing2 jako rozszerzenia pojedynczego modułu?

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'}); 
}]). 

Answer 1

Wstrzyknij moduł na oba, które udostępnia te właściwości.

Użyj klasę dostawcy nadpisać właściwości lub wystąpienia z nich na dowolnym zakresie:

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); 
      } 
     }; 
    }]; 
}); 

Sekret sos: $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); 
      } 
     }; 
    }]; 
});