Geciktirme AngularJS model kadar rotayı değiştirmek titreşimi önlemek için yüklü

SORU

15 AĞUSTOS 2012, ÇARŞAMBA

Geciktirme AngularJS model kadar rotayı değiştirmek titreşimi önlemek için yüklü

Eğer AngularJS için bir yol (Gmail gibi) olup olmadığını merak ediyorumher model ve veri alındıktan sonra yeni bir rota gösterilen gecikmekendi hizmetlerini kullanarak.

Eğer tüm Projeleri listelenen ProjectsController ve şablonu olan project_index.html eğer orada örneğin, bu Projeler, Project.query() tamamen yeni bir sayfa göstermeden önce getirilen olacağını gösterdi.

O zamana kadar, eski sayfa hala göstermek için (eğer tarama olsaydım örneğin, bir sayfa sonra bu Proje dizini görmeye karar verdim) devam edecekti.

CEVAP

15 AĞUSTOS 2012, ÇARŞAMBA

13* $routeProvider *özellik veri yüklenene kadar rota değişikliği geciktirme sağlar.

İlk böyle resolve öznitelik ile bir yol tanımlar.

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

resolve özelliği güzergahı üzerinde tanımlanan dikkat edin.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    // see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
    var deferred = $q.defer();
    Phone.query(function(successData) {
            deferred.resolve(successData); 
    }, function(errorData) {
            deferred.reject(); // you could optionally pass error data here
    });
    return deferred.promise;
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

Denetleyici tanımı gidermek içerdiğine dikkat edin denetleyicisi yapıcı için mevcut olması gereken şeyleri beyan ettiği nesne. Burada phones denetleyici içine enjekte edilir ve resolve özelliği olarak tanımlanır.

resolve.phones işlevi söz döndürülmesinden sorumludur. Sözlerin hepsi toplanır ve rota değişikliği sözlerin ardından tüm giderilinceye kadar gecikir.

Çalışan demo: http://mhevery.github.com/angular-phonecat/app/#/phones Kaynak: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

Bunu Paylaş: