SORU
29 NİSAN 2013, PAZARTESİ


AngularJS : asenkron veri hizmeti Başlatılamıyor

Bazı zaman uyumsuz veri ile başlatmak istiyorum AngularJS bir hizmeti var. Şöyle bir şey:

myModule.service('MyService', function($http) {
    var myData = null;

    $http.get('data.json').success(function (data) {
        myData = data;
    });

    return {
        setData: function (data) {
            myData = data;
        },
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

Açıkçası bu bir şey myData geri dönmeden doStuff() aramak için çalışırsa, bir null işaretçi istisna alacağım çünkü işe yaramaz. Bildiğim kadarıyla söyleyebilirim okuma bazı diğer sorular here here ben birkaç seçenek vardır, ama hiçbiri çok temiz (belki de ben eksik bir şey):

Kurulum Servisi"" . run ile

Tuzak zaman benim app bunu yapmak için:

myApp.run(function ($http, MyService) {
    $http.get('data.json').success(function (data) {
        MyService.setData(data);
    });
});

O zaman benim servis bu gibi görünecektir:

myModule.service('MyService', function() {
    var myData = null;
    return {
        setData: function (data) {
            myData = data;
        },
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

Bu bazen çalışır ama eğer asenkron veri başlatılmış her şeyi elde etmek için gereken daha uzun olursa doStuff() aradığımda null işaretçi istisna olsun

Kullanım nesneleri veriyorum

Bu muhtemelen işe yarar. Tek dezavantajı her yerde arayacağım doStuff bilmek zorunda kalacağım Başlatılıyor() bir söz verir ve bu kod bize then vaadi ile etkileşim içinde olacak. Sadece benim bilgim uygulama yüklemeden önce geri kadar bekleyin tercih ederim.

Manuel Bootstrap

angular.element(document).ready(function() {
    $.getJSON("data.json", function (data) {
       // can't initialize the data here because the service doesn't exist yet
       angular.bootstrap(document);
       // too late to initialize here because something may have already
       // tried to call doStuff() and would have got a null pointer exception
    });
});

Global Javascript Var Doğrudan küresel bir Javascript değişkeni için benim JSON gönderebilirim:

HTML:

<script type="text/javascript" src="data.js"></script>

data.js:

var dataForMyService = { 
// myData here
};

O zaman MyService başlatırken kullanılabilir olacaktır:

myModule.service('MyService', function() {
    var myData = dataForMyService;
    return {
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

Bu çok işe yarar, ama sonra kötü kokan küresel bir javascript değişken var.

Bu benim tek seçenek mi var? Bu seçeneklerden biri de diğerlerinden daha iyi? Bu oldukça uzun bir soru olduğunu biliyorum, ama bütün seçeneklerimi Gözden denedim bunu göstermek istedim. Herhangi bir yardım büyük mutluluk duyacağız.

CEVAP
29 NİSAN 2013, PAZARTESİ


$routeProvider.when('/path',{ resolve:{...} bir göz oldu mu? Söz yaklaşımı biraz daha temiz yapabilirsiniz:

Açığa hizmetiniz bir söz:

app.service('MyService', function($http) {
    var myData = null;

    var promise = $http.get('data.json').success(function (data) {
      myData = data;
    });

    return {
      promise:promise,
      setData: function (data) {
          myData = data;
      },
      doStuff: function () {
          return myData;//.getSomeData();
      }
    };
});

Rotanızı config resolve ekleyin:

app.config(function($routeProvider){
  $routeProvider
    .when('/',{controller:'MainCtrl',
    template:'<div>From MyService:<pre>{{data | json}}</pre></div>',
    resolve:{
      'MyServiceData':function(MyService){
        // MyServiceData will also be injectable in your controller, if you don't want this you could create a new promise with the $q service
        return MyService.promise;
      }
    }})
  }):

Kumandanız tüm bağımlılıkları çözülmüş önce örneği almazsınız:

app.controller('MainCtrl', function($scope,MyService) {
  console.log('Promise is now resolved: ' MyService.doStuff().data)
  $scope.data = MyService.doStuff();
});

Plnkr bir örnek yaptım: http://plnkr.co/edit/GKg21XH0RwCMEQGUdZKH?p=preview

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Joseph Herscher

    Joseph Hersc

    14 Mart 2007
  • Microsoft Help & Training Videos

    Microsoft He

    31 Mart 2009
  • spectragirlz16's channel

    spectragirlz

    22 Ocak 2012