chia sẻ giữa các mô-đun với AngularJS?

Question

Hãy nói rằng tôi có một mô-đun stuff mà tôi muốn tiêm vào myApp config:

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

    }]); 

Có hai submodules:

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

Dưới đây là những người đầu tiên:

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

Và thứ hai giống hệt nhau để dễ ví dụ:

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

Những gì bạn sẽ nhận thấy là bạn có thể truy cập cả trong số họ là các nhà cung cấp để cấu hình tùy chọn:

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

Nếu chúng ta đang ở trong một bộ điều khiển, bạn có thể ghi đè lên mỗi phạm vi như:

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

Nhưng nếu họ luôn chia sẻ cùng một tài sản thì sao? Làm cách nào để chia sẻ điều gì đó giữa các nhà cung cấp?

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

Tôi có thể tiêm $stuff và cấu hình một tài sản chung cho cả $thing1 và $thing2?

Làm cách nào để truy cập vào cả hai $thing1 và $thing2 dưới dạng tiện ích mở rộng của một mô-đun?

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

Tiêm mô-đun vào cả hai chia sẻ các thuộc tính này.

Sử dụng các lớp cung cấp để ghi đè các thuộc tính hoặc nhanh chóng chúng từ bất kỳ phạm vi:

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

Các nước sốt bí mật: $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); 
      } 
     }; 
    }]; 
});