meaning - angularjs tutorial pdf




App.config में सेवा इंजेक्ट करें (7)

मैं app.config में एक सेवा इंजेक्ट करना चाहता हूं, ताकि नियंत्रक को कॉल करने से पहले डेटा पुनर्प्राप्त किया जा सके। मैंने इसे इस तरह से आजमाया:

सर्विस:

app.service('dbService', function() {
    return {
        getData: function($q, $http) {
            var defer = $q.defer();
            $http.get('db.php/score/getData').success(function(data) {
                defer.resolve(data);            
            });
            return defer.promise;
        }
    };
});

कॉन्फ़िग:

app.config(function ($routeProvider, dbService) {
    $routeProvider
        .when('/',
        {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                data: dbService.getData(),
            }
        })
});

लेकिन मुझे यह त्रुटि मिलती है:

त्रुटि: अज्ञात प्रदाता: EditorApp से dbService

सेटअप को सही कैसे करें और इस सेवा को इंजेक्ट कैसे करें?


एक कस्टम AngularJS प्रदाता के रूप में अपनी सेवा सेट करें

स्वीकार किए गए उत्तर के बावजूद, आप वास्तव में ऐसा कर सकते हैं जो आप करना चाहते थे, लेकिन आपको इसे कॉन्फ़िगर करने योग्य प्रदाता के रूप में सेट करने की आवश्यकता है, ताकि यह कॉन्फ़िगरेशन चरण के दौरान सेवा के रूप में उपलब्ध हो .. सबसे पहले, अपनी Service को एक में बदलें नीचे दिखाए गए प्रदाता। यहां महत्वपूर्ण अंतर यह है कि defer.promise के मान को सेट defer , आप defer.promise प्रॉपर्टी को $http.get द्वारा लौटाए गए वादे ऑब्जेक्ट पर सेट करते हैं:

प्रदाता सेवा: (प्रदाता: सेवा नुस्खा)

app.provider('dbService', function dbServiceProvider() {

  //the provider recipe for services require you specify a $get function
  this.$get= ['dbhost',function dbServiceFactory(dbhost){
     // return the factory as a provider
     // that is available during the configuration phase
     return new DbService(dbhost);  
  }]

});

function DbService(dbhost){
    var status;

    this.setUrl = function(url){
        dbhost = url;
    }

    this.getData = function($http) {
        return $http.get(dbhost+'db.php/score/getData')
            .success(function(data){
                 // handle any special stuff here, I would suggest the following:
                 status = 'ok';
                 status.data = data;
             })
             .error(function(message){
                 status = 'error';
                 status.message = message;
             })
             .then(function(){
                 // now we return an object with data or information about error 
                 // for special handling inside your application configuration
                 return status;
             })
    }    
}

अब, आपके पास एक कॉन्फ़िगर करने योग्य कस्टम प्रदाता है, आपको बस इसे इंजेक्ट करने की आवश्यकता है। गायब होने का मुख्य अंतर "आपके इंजेक्शन पर प्रदाता" है।

config:

app.config(function ($routeProvider) { 
    $routeProvider
        .when('/', {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                dbData: function(DbService, $http) {
                     /*
                     *dbServiceProvider returns a dbService instance to your app whenever
                     * needed, and this instance is setup internally with a promise, 
                     * so you don't need to worry about $q and all that
                     */
                    return DbService('http://dbhost.com').getData();
                }
            }
        })
});

अपने appCtrl में हल किए गए डेटा का उपयोग करें

app.controller('appCtrl',function(dbData, DbService){
     $scope.dbData = dbData;

     // You can also create and use another instance of the dbService here...
     // to do whatever you programmed it to do, by adding functions inside the 
     // constructor DbService(), the following assumes you added 
     // a rmUser(userObj) function in the factory
     $scope.removeDbUser = function(user){
         DbService.rmUser(user);
     }

})

संभावित विकल्प

निम्नलिखित विकल्प एक समान दृष्टिकोण है, लेकिन परिभाषा को .config भीतर होने की अनुमति देता है, जो आपके ऐप के संदर्भ में विशिष्ट मॉड्यूल के भीतर सेवा को समाहित करता है। वह विधि चुनें जो आपके लिए सही है। इन सभी चीजों को लटका पाने में आपकी सहायता के लिए तीसरे वैकल्पिक और उपयोगी लिंक पर नोट्स के लिए नीचे भी देखें

app.config(function($routeProvider, $provide) {
    $provide.service('dbService',function(){})
    //set up your service inside the module's config.

    $routeProvider
        .when('/', {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                data: 
            }
        })
});

कुछ उपयोगी संसाधन

  • जॉन Lindquist egghead.io . egghead.io पर एक उत्कृष्ट 5 मिनट स्पष्टीकरण और प्रदर्शन का प्रदर्शन है, और यह मुफ्त सबक में से एक है! मैंने मूल रूप से इस अनुरोध के संदर्भ में $http विशिष्ट बनाकर अपने प्रदर्शन को संशोधित किया
  • Providers पर AngularJS डेवलपर गाइड देखें
  • Clevertech.biz पर factory / service / provider बारे में एक उत्कृष्ट स्पष्टीकरण भी है।

प्रदाता आपको .service विधि पर थोड़ा अधिक कॉन्फ़िगरेशन देता है, जो इसे एप्लिकेशन स्तर प्रदाता के रूप में बेहतर बनाता है, लेकिन आप कॉन्फ़िगरेशन ऑब्जेक्ट में कॉन्फ़िगरेशन ऑब्जेक्ट के भीतर इसे कॉन्फ़िगर कर सकते हैं जैसे कि कॉन्फ़िगरेशन में $provide करते हैं:


** angular.injector का उपयोग कर अन्य मॉड्यूल से सेवाओं का स्पष्ट रूप से अनुरोध करें **

किम 3 के जवाब पर विस्तार करने के लिए, आप उन्हें प्रदाताओं को बदलने के बिना सेवाएं, कारखानों आदि प्रदान कर सकते हैं, जब तक कि वे अन्य मॉड्यूल में शामिल हों ...

हालांकि, मुझे यकीन नहीं है कि *Provider (जिसे एक सेवा, या फैक्ट्री को संसाधित करने के बाद कोणीय द्वारा आंतरिक रूप से बनाया जाता है) हमेशा उपलब्ध होगा (यह पहले और लोड होने पर निर्भर करता है), क्योंकि कोणीय आलसी लोड मॉड्यूल लोड करता है।

ध्यान दें कि यदि आप मानों को फिर से इंजेक्ट करना चाहते हैं कि उन्हें स्थिरांक के रूप में माना जाना चाहिए।

यहां एक और स्पष्ट, और संभवतः अधिक विश्वसनीय तरीका है + एक काम करने वाला प्लंकर

var base = angular.module('myAppBaseModule', [])
base.factory('Foo', function() { 
  console.log("Foo");
  var Foo = function(name) { this.name = name; };
  Foo.prototype.hello = function() {
    return "Hello from factory instance " + this.name;
  }
  return Foo;
})
base.service('serviceFoo', function() {
  this.hello = function() {
    return "Service says hello";
  }
  return this;
});

var app = angular.module('appModule', []);
app.config(function($provide) {
  var base = angular.injector(['myAppBaseModule']);
  $provide.constant('Foo', base.get('Foo'));
  $provide.constant('serviceFoo', base.get('serviceFoo'));
});
app.controller('appCtrl', function($scope, Foo, serviceFoo) {
  $scope.appHello = (new Foo("app")).hello();
  $scope.serviceHello = serviceFoo.hello();
});

एलेक्स ने जो भी करने का प्रयास कर रहे हैं, वह करने में सक्षम न होने का सही कारण प्रदान किया है, इसलिए +1। लेकिन आप इस मुद्दे का सामना कर रहे हैं क्योंकि आप काफी हल नहीं कर रहे हैं कि वे कैसे डिजाइन किए गए हैं।

resolve या तो एक सेवा की स्ट्रिंग या इंजेक्शन के लिए एक मूल्य लौटने वाला फ़ंक्शन लेता है। चूंकि आप बाद वाले कर रहे हैं, आपको एक वास्तविक फ़ंक्शन में पास करने की आवश्यकता है:

resolve: {
  data: function (dbService) {
    return dbService.getData();
  }
}

जब फ्रेमवर्क data को हल करने के लिए जाता है, तो यह dbService को फ़ंक्शन में इंजेक्ट करेगा ताकि आप इसका उपयोग आसानी से कर सकें। इसे पूरा करने के लिए आपको config ब्लॉक में इंजेक्ट करने की आवश्यकता नहीं है।

बॉन एपेतीत!


खैर, मैंने इस के साथ थोड़ा संघर्ष किया, लेकिन मैंने वास्तव में ऐसा किया।

मुझे नहीं पता कि कोणीय में कुछ बदलावों के कारण उत्तर पुराना हो गया है, लेकिन आप इसे इस तरह से कर सकते हैं:

यह आपकी सेवा है:

.factory('beerRetrievalService', function ($http, $q, $log) {
  return {
    getRandomBeer: function() {
      var deferred = $q.defer();
      var beer = {};

      $http.post('beer-detail', {})
      .then(function(response) {
        beer.beerDetail = response.data;
      },
      function(err) {
        $log.error('Error getting random beer', err);
        deferred.reject({});
      });

      return deferred.promise;
    }
  };
 });

और यह विन्यास है

.when('/beer-detail', {
  templateUrl : '/beer-detail',
  controller  : 'productDetailController',

  resolve: {
    beer: function(beerRetrievalService) {
      return beerRetrievalService.getRandomBeer();
    }
  }
})

संक्षिप्त उत्तर: आप नहीं कर सकते। AngularJS आपको कॉन्फ़िगरेशन में सेवाओं को इंजेक्ट करने की अनुमति नहीं देगा क्योंकि यह सुनिश्चित नहीं हो सकता कि उन्हें सही तरीके से लोड किया गया है।

यह प्रश्न और उत्तर देखें: मॉड्यूल.कॉन्फिग के अंदर मूल्य के कोणीय जेएस निर्भरता इंजेक्शन

एक मॉड्यूल कॉन्फ़िगरेशन और रन ब्लॉक का संग्रह है जो बूटस्ट्रैप प्रक्रिया के दौरान एप्लिकेशन पर लागू होता है। अपने सबसे सरल रूप में मॉड्यूल में दो प्रकार के ब्लॉक का संग्रह होता है:

कॉन्फ़िगरेशन ब्लॉक - प्रदाता पंजीकरण और कॉन्फ़िगरेशन चरण के दौरान निष्पादित हो जाते हैं। केवल प्रदाताओं और स्थिरांक विन्यास ब्लॉक में इंजेक्शन किया जा सकता है। यह पूरी तरह कॉन्फ़िगर किए जाने से पहले सेवाओं के आकस्मिक तत्कालता को रोकने के लिए है।


सबसे आसान तरीका: $injector = angular.element(document.body).injector()

फिर invoke() चलाने के invoke() इसका उपयोग करें या get()


कॉन्फ़िगरेशन में सेवा विधियों को कॉल करने के लिए $ इंजेक्टर का उपयोग करना

मेरे पास एक समान समस्या थी और ऊपर दिखाए गए $ इंजेक्टर सेवा का उपयोग करके इसे हल किया गया। मैंने सीधे सेवा इंजेक्शन देने की कोशिश की लेकिन $ http पर एक परिपत्र निर्भरता के साथ समाप्त हो गया। सेवा त्रुटि के साथ एक मोडल प्रदर्शित करती है और मैं यूई-बूटस्ट्रैप मोडल का उपयोग कर रहा हूं जिसमें $ https पर निर्भरता भी है।

    $httpProvider.interceptors.push(function($injector) {
    return {
        "responseError": function(response) {

            console.log("Error Response status: " + response.status);

            if (response.status === 0) {
                var myService= $injector.get("myService");
                myService.showError("An unexpected error occurred. Please refresh the page.")
            }
        }
    }




angularjs