कस्टम एप्लिकेशन के अंदर $ http का उपयोग एप्लिकेशन कॉन्फिगर, angular.js में करें


90

मुख्य प्रश्न - क्या यह संभव है? मैंने बिना किस्मत के कोशिश की ।।

मुख्य app.js

...
var app = angular.module('myApp', ['services']);
app.config(['customProvider', function (customProvider) {

}]);
...

प्रदाता ही

var services = angular.module('services', []);
services.provider('custom', function ($http) {
});

और मुझे ऐसी त्रुटि मिली है:

Uncaught Error: Unknown provider: $http from services 

कोई विचार?

धन्यवाद!



आदमी, हाँ यह सच है, लेकिन मैं के बारे में बात कर रहा हूँ app.configभाग
Kosmetika


मैं इस सीमा के बारे में भी जानता हूं, लेकिन सोचा कि प्रदाता के अंदर यह किसी भी तरह संभव है ..
क्वाटिसिका

जवाबों:


158

आधार - रेखा है की:

  • आप प्रदाता कॉन्फ़िगरेशन अनुभाग में किसी सेवा को इंजेक्ट नहीं कर सकते
  • आप किसी सेवा को उस अनुभाग में इंजेक्ट कर सकते हैं जो प्रदाता की सेवा को आरंभ करता है

विवरण:

कोणीय ढांचे में एक 2 चरण की आरंभिक प्रक्रिया है:

चरण 1: कॉन्फ़िगर करें

configचरण के दौरान सभी प्रदाताओं को प्रारंभ किया जाता है और सभी configअनुभाग निष्पादित होते हैं। configवर्गों कोड जो प्रदाता वस्तुओं कॉन्फ़िगर करता है और इसलिए वे प्रदाता वस्तुओं के साथ इंजेक्ट किया जा सकता हो सकती है। हालाँकि, चूंकि प्रदाता सेवा ऑब्जेक्ट के लिए कारखाने हैं और इस स्तर पर प्रदाता पूरी तरह से प्रारंभ / कॉन्फ़िगर नहीं किए गए हैं -> आप प्रदाता से इस चरण में आपके लिए सेवा बनाने के लिए नहीं कह सकते -> कॉन्फ़िगरेशन चरण में आप उपयोग नहीं कर सकते / सेवाओं को इंजेक्ट करें । जब यह चरण पूरा हो जाता है, तो सभी प्रदाता तैयार हो जाते हैं (कॉन्फ़िगरेशन चरण पूरा होने के बाद कोई और प्रदाता कॉन्फ़िगरेशन नहीं किया जा सकता है)।

चरण 2: भागो

runचरण के दौरान सभी runवर्गों को निष्पादित किया जाता है। इस स्तर पर प्रदाता तैयार हैं और सेवाओं का निर्माण कर सकते हैं -> runचरण के दौरान आप सेवाओं का उपयोग / इंजेक्शन लगा सकते हैं

उदाहरण:

1. $httpप्रदाता आरंभीकरण फ़ंक्शन के लिए सेवा को इंजेक्ट करना काम नहीं करेगा

//ERRONEOUS
angular.module('myModule').provider('myProvider', function($http) {
    // SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
    ...

    this.$get = function() {
        // code to initialize/configure the SERVICE goes here (executed during `run` stage)

        return myService;
    };
});

चूंकि हम $httpसेवा को एक फ़ंक्शन में इंजेक्ट करने की कोशिश कर रहे हैं , जिसे configचरण के दौरान निष्पादित किया जाता है, हमें एक त्रुटि मिलेगी:

Uncaught Error: Unknown provider: $http from services 

यह त्रुटि वास्तव में यह कह रही है कि $httpProviderजिसका उपयोग $httpसेवा बनाने के लिए किया जाता है वह अभी तैयार नहीं है (क्योंकि हम अभी भी configचरण में हैं)।

2. $httpसेवा आरंभीकरण कार्य करने के लिए सेवा का इंजेक्शन लगाने का काम करेगा :

//OK
angular.module('myModule').provider('myProvider', function() {
    // SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
    ...

    this.$get = function($http) {
        // code to initialize/configure the SERVICE goes here (executed during `run` stage)

        return myService;
    };
});

चूंकि अब हम सेवा को सेवा आरंभीकरण फ़ंक्शन में इंजेक्ट कर रहे हैं, जिसे runचरण के दौरान निष्पादित किया जाता है यह कोड काम करेगा।


63
अच्छा उत्तर, लेकिन जब यह बताता है कि कॉन्फ़िगरेशन के दौरान सेवाओं को कैसे इंजेक्ट करना संभव नहीं है, तो यह नहीं बताता है कि कॉन्फ़िगरेशन के दौरान HTTP POST / GET कैसे बनाया जाता है। यह उन अनुप्रयोगों के लिए महत्वपूर्ण है जो एक एपीआई द्वारा प्रदान किए गए मूल्यों का उपयोग करके कॉन्फ़िगर किए गए हैं।
शॉन ओ'डेल

3
@bebraw & Kosmetika - केवल एक चीज जो मैं सोच सकता हूं कि आपको कॉन्फ़िगरेशन चरण के दौरान अनुरोध करने की आवश्यकता होगी, किसी प्रकार की सेटिंग ऑब्जेक्ट है। हो सकता है कि इसमें एपीआई एंडपॉइंट, उपयोगकर्ता जानकारी, उपयोगकर्ता की लोकेल और भाषा सेटिंग्स आदि शामिल हों। यदि ऐसा है, तो मैं उस जानकारी को किसी जावास्क्रिप्ट स्रोत में शामिल करने की सलाह दूंगा। आप कुछ सेटिंग्स डालने के लिए index.html पर सर्वर-साइड रेंडरिंग का उपयोग कर सकते हैं ताकि वे आपके ऐप को इनिशियलाइज़ करने से पहले उपलब्ध हों। बाकी सब कुछ, मैं यह पता लगाने की कोशिश करूंगा कि यह कैसे किया जाए
सीन क्लार्क हेस

2
@ सीन: HTTP POST / GET कैसे बनाया जाता है, यह ओपी की तुलना में एक अलग सवाल है (क्या कॉन्फ़िगरेशन चरण के अंदर $ http का उपयोग करना संभव है?), और शायद पूरी तरह से एक अलग पोस्ट को गुणित करता है; कोणीय के विन्यास चरण की तुल्यकालिक प्रकृति के कारण, आपके कॉन्फ़िगरेशन कोड को सर्वर-साइड डेटा प्रदान करने का एक अच्छा तरीका यह है कि इसे सर्वर-साइड रेंडरिंग (जैसे <script>var config = <% = mySettings.toJson() %>;</script>) के दौरान आपके HTML पेज में जावास्क्रिप्ट ऑब्जेक्ट के रूप में प्रस्तुत किया जाए । यह एक टेम्प्लेटिंग इंजन जैसे कि स्मार्टी के लिए पीएचपी, जिंज 2 को पायथन के लिए, नोड्यूज के लिए नुन्क्स, आदि का उपयोग करके किया जा सकता है
ट्रेवर

4
@threed: सर्वर पर सीधे HTML या js में कॉन्फ़िगर डेटा सम्मिलित करना केवल तभी काम करता है जब आपका क्लाइंट कोड उसी सर्वर से आता है। कोर के साथ, अब यह संभव है (और बहुत ही वांछनीय) ग्राहक कोड एक अलग सर्वर से परोसा जा रहा है, और डेटा अलग (एस) सर्वर से परोसा जा रहा है। उन मामलों में, हमें HTTP का उपयोग करके कॉन्फ़िगर डेटा को पुनः प्राप्त करने की आवश्यकता है।
बर्नार्ड

4
हालांकि यह एक उत्तर है, यह उस प्रश्न का उत्तर नहीं है जो पूछा गया था।
एरिक

64

इससे आपको थोड़ा लाभ हो सकता है:

var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');

लेकिन सावधान रहें, सफलता / त्रुटि कॉलबैक आपको एप्लिकेशन प्रारंभ और सर्वर प्रतिक्रिया के बीच एक दौड़-हालत में रख सकती है।


6
"स्वीकृत उत्तर" मेरे प्रदाता के लिए विफल रहा ... मैंने बिना किसी उम्मीद के उस काम को करने की कोशिश में 2 दिन की हताशा का सामना किया। आपके दृष्टिकोण ने तुरंत काम किया।
डेव अल्परोविच

क्या आप स्पष्ट कर सकते हैं कि यदि यहां बनाई गई आवृत्ति "वास्तविक" सर्विस सिंगलटन है या केवल उस सेवा का एक उदाहरण है जिसे त्याग दिया गया है जब कोणीय अपने वास्तविक इंजेक्टर जादू करता है।
एरिक

एरिक, मैं इस समय की पुष्टि नहीं कर सकता। हालांकि, मैं आमतौर पर क्या करता हूं (यदि लागू हो) है angular.injector(['mymodule'])- लेकिन मुझे यकीन नहीं है कि आप $httpसेवा के लिए इस दृष्टिकोण का उपयोग कर सकते हैं । मैं कहना चाहता हूं कि मेरे पास हालांकि है। यकीन नहीं होता है कि यह मदद करता है या नहीं: - /
कोडी

2
यह स्वीकृत उत्तर होना चाहिए। मैंने इसे काम करने की कोशिश करते हुए एक अच्छे के लिए संघर्ष किया, और इस दृष्टिकोण ने मेरी समस्या को तुरंत हल कर दिया। मुझे लगता है कि यह एक बहुत ही सामान्य मुद्दा हो सकता है। धन्यवाद
@ कोडी

5
मैं पुष्टि करता हूं कि प्रदाता में $ http का उपयोग करने के लिए स्वीकृत समाधान काम नहीं कर रहा है। लेकिन @Cody का जवाब चाल बनाता है
डिनो

1

यह एक पुराना सवाल है, लगता है कि हमारे पास कुछ मुर्गी के अंडे की बात चल रही है अगर हम पुस्तकालय की मूल क्षमता पर भरोसा करना चाहते हैं।

समस्या को मौलिक रूप से हल करने के बजाय, मैंने जो कुछ किया, वह बाय-पास है। ऐसा निर्देश बनाएं जो पूरे शरीर को लपेटे। पूर्व।

<body ng-app="app">
  <div mc-body>
    Hello World
  </div>
</body>

अब mc-body(एक बार), रेंडर करने से पहले आरंभीकृत करने की आवश्यकता है।

link: function(scope, element, attrs) {
  Auth.login().then() ...
}

Auth एक सेवा या प्रदाता है, पूर्व।

.provider('Auth', function() {
  ... keep your auth configurations
  return {
    $get: function($http) {
      return {
        login: function() {
          ... do something about the http
        }
      }
    }
  }
})

मुझे लगता है कि बूटस्ट्रैप के आदेश पर मेरा नियंत्रण है, यह नियमित बूटस्ट्रैप सभी प्रदाता कॉन्फ़िगरेशन को हल करने के बाद है और फिर mc-bodyनिर्देश को आरंभ करने का प्रयास करता है ।

और यह निर्देश मेरे लिए रूटिंग से आगे हो सकता है, क्योंकि रूटिंग को निर्देश पूर्व के माध्यम से भी इंजेक्ट किया जाता है। <ui-route />। लेकिन मैं इस पर गलत हो सकता हूं। कुछ और जांच की जरूरत है।


क्या आप अपने समाधान के बारे में विस्तार से बता सकते हैं?
मार्क

-2

आपके प्रश्न के उत्तर में, "कोई विचार?", मैं "हां" के साथ उत्तर देना चाहूंगा। लेकिन रुकिए, और भी है!

मैं सुझाव देता हूं कि सिर्फ JQuery का उपयोग करें। उदाहरण के लिए:

var app = angular.module('myApp', ['services']);
app.config(['$anyProvider', function ($anyProvider) {
    $.ajax({
        url: 'www.something.com/api/lolol',
        success: function (result) {
            $anyProvider.doSomething(result);
        }
    });
}]);

सफलता कॉलबैक में $ customProvider $ शामिल है, हालांकि यह एक आंतरिक प्रदाता है।
जेफ फिशर

1
आप सही कह रहे हैं कि मेरे पास $ और $ का मिश्रण नहीं था। मैंने इसे सभी $ के लिए अद्यतन किया।
सुमेरे
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.