Задержка изменения маршрута AngularJS до загрузки модели для предотвращения мерцания

Задержка показа маршрута обязательно приведет к асинхронному запутыванию ... почему бы просто не отслеживать статус загрузки вашего основного объекта и не использовать его в представлении. Например, в вашем контроллере вы можете использовать обратные вызовы успеха и ошибки на ngResource:

$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
    $scope.httpStatus = 200;
  }, function(response) {
    $scope.httpStatus = response.status;
  });

Тогда в представлении вы могли делать все, что угодно:

<div ng-show="httpStatus == 0">
    Loading
</div>
<div ng-show="httpStatus == 200">
    Real stuff
    <div ng-repeat="project in projects">
         ...
    </div>
</div>
<div ng-show="httpStatus >= 400">
    Error, not found, etc. Could distinguish 4xx not found from 
    5xx server error even.
</div>

Я работал с кодом Misko, приведенным выше, и вот что я с ним сделал. Это более актуальное решение, поскольку $defer было изменено на $timeout. Подстановка $timeout, однако, будет ждать периода тайм-аута (в коде Misko - 1 секунда), а затем вернет данные, надеясь, что они будут разрешены вовремя. Таким образом, он возвращается как можно скорее.

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

PhoneListCtrl.resolve = {

  phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
  }
}

Использование AngularJS 1.1.5

Обновление функции «телефоны» в ответе Джастена с использованием синтаксиса AngularJS 1.1.5.

Оригинал:

phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
}

Обновлено:

phones: function(Phone) {
    return Phone.query().$promise;
}

Намного короче, спасибо команде Angular и участникам. :)

Это тоже ответ Максимилиана Гофмана. По-видимому, эта фиксация попала в 1.1.5.

Вы можете использовать свойство $ routeProvider resolve, чтобы отложить изменение маршрута до тех пор, пока данные не будут загружен.

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider, EntitiesCtrlResolve, EntityCtrlResolve) {
    $routeProvider.
      when('/entities', {
        templateUrl: 'entities.html', 
        controller: 'EntitiesCtrl', 
        resolve: EntitiesCtrlResolve
      }).
      when('/entity/:entityId', {
        templateUrl: 'entity.html', 
        controller: 'EntityCtrl', 
        resolve: EntityCtrlResolve
      }).
      otherwise({redirectTo: '/entities'});
}]);

Обратите внимание, что свойство resolve определено на маршруте.

EntitiesCtrlResolve и EntityCtrlResolve - это постоянные объекты, определенные в том же файле, что и EntitiesCtrl и EntityCtrl контроллеры.

// EntitiesCtrl.js

angular.module('app').constant('EntitiesCtrlResolve', {
  Entities: function(EntitiesService) {
    return EntitiesService.getAll();
  }
});

angular.module('app').controller('EntitiesCtrl', function(Entities) {
  $scope.entities = Entities;

  // some code..
});

// EntityCtrl.js

angular.module('app').constant('EntityCtrlResolve', {
  Entity: function($route, EntitiesService) {
    return EntitiesService.getById($route.current.params.projectId);
  }
});

angular.module('app').controller('EntityCtrl', function(Entity) {
  $scope.entity = Entity;

  // some code..
});

Мне нравится идея darkporter, потому что команде разработчиков, плохо знакомой с AngularJS, будет легко понять ее и сразу же приступить к работе.

Я создал эту адаптацию, в которой используются 2 блока: один для панели загрузчика, а другой - для фактического содержимого, отображаемого после загрузки данных. Обработка ошибок будет выполняться в другом месте.

Добавьте флаг готовности к $ scope:

$http({method: 'GET', url: '...'}).
    success(function(data, status, headers, config) {
        $scope.dataForView = data;      
        $scope.ready = true;  // <-- set true after loaded
    })
});

В представлении html:

<div ng-show="!ready">

    <!-- Show loading graphic, e.g. Twitter Boostrap progress bar -->
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>

</div>

<div ng-show="ready">

    <!-- Real content goes here and will appear after loading -->

</div>

См. Также: документы индикатора выполнения Boostrap

Мне понравились приведенные выше ответы, и я многому от них научился, но в большинстве из приведенных выше ответов чего-то не хватает.

Я застрял в аналогичном сценарии, когда я разрешал URL-адрес с некоторыми данными, которые были получены в первом запросе с сервера. Проблема, с которой я столкнулся, заключалась в том, что если обещание равно rejected.

Я использовал настраиваемый поставщик, который раньше возвращал Promise, который был разрешен resolve из $routeProvider во время фазы конфигурации.

Я хочу подчеркнуть здесь концепцию when, которая делает что-то вроде этого.

Он видит URL-адрес в строке URL-адресов, а затем соответствующий блок when в вызываемом контроллере, и представление пока упоминается как хорошее.

Допустим, у меня есть следующий код фазы конфигурации.

App.when('/', {
   templateUrl: '/assets/campaigns/index.html',
   controller: 'CampaignListCtr',
   resolve : {
      Auth : function(){
         return AuthServiceProvider.auth('campaign');
      }
   }
})
// Default route
.otherwise({
   redirectTo: '/segments'
});

По корневому URL-адресу в браузере вызывается первый блок выполнения, в противном случае вызывается otherwise.

Давайте представим сценарий, когда я нажимаю rootUrl в адресной строке, вызывается функция AuthServicePrivider.auth().

Допустим, возвращенное обещание находится в состоянии отклонить что тогда ???

Вообще ничего не рендерится.

Блок Otherwise не будет выполняться, как для любого URL-адреса, который не определен в блоке конфигурации и неизвестен фазе конфигурации angularJs.

Нам нужно будет обработать событие, которое запускается, когда это обещание не выполняется. В случае ошибки $routeChangeErorr увольняется $rootScope.

Его можно записать, как показано в приведенном ниже коде.

$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    // Use params in redirection logic.
    // event is the routeChangeEvent
    // current is the current url
    // previous is the previous url
    $location.path($rootScope.rootPath);
});

IMO Обычно рекомендуется помещать код отслеживания событий в блок выполнения приложения. Этот код запускается сразу после фазы настройки приложения.

App.run(['$routeParams', '$rootScope', '$location', function($routeParams, $rootScope, $location){
   $rootScope.rootPath = "my custom path";
   // Event to listen to all the routeChangeErrors raised
   // by the resolve in config part of application
   $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
       // I am redirecting to rootPath I have set above.
       $location.path($rootScope.rootPath);
   });
}]);

Таким образом, мы можем справиться с ошибкой обещания на этапе настройки.

У меня был сложный многоуровневый интерфейс скользящей панели с отключенным слоем экрана. Создание директивы по отключению слоя экрана, которая создаст событие щелчка для выполнения состояния, например

$state.go('account.stream.social.view');

производили эффект мерцания. history.back () вместо этого работал нормально, однако в моем случае он не всегда возвращался в историю. Итак, я обнаружил, что если я просто создаю атрибут href на моем экране отключения вместо state.go, это сработает как шарм.

<a class="disable-screen" back></a>

Директива "назад"

app.directive('back', [ '$rootScope', function($rootScope) {

    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
        }
    };

} ]);

app.js я просто сохраняю предыдущее состояние

app.run(function($rootScope, $state) {      

    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {         

        $rootScope.previousState = fromState.name;
        $rootScope.currentState = toState.name;


    });
});

Одним из возможных решений может быть использование директивы ng-cloak с элементом, в котором мы используем модели, например.

<div ng-cloak="">
  Value in  myModel is: {{myModel}}
</div>

Думаю, это требует наименьших усилий.