Загрузка ошибки углового обзора в первый раз

0

Когда пользователь нажимает на гиперссылку, и я меняю ng-view, в первый раз это занимает больше времени, но в следующий раз переход от одного вида к другому является плавным без каких-либо задержек. Я собрал образец plunker здесь: http://plnkr.co/edit/cINyIOpJBEAsa2pUk3tP?p=preview

app.js из этого plunker выглядит так:

var sampleApp = angular.module('sampleApp', [
  'ngRoute',
  'ngAnimate'
]);

sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/ShowOrder/:orderId', {
      templateUrl: 'templates/show_order.html',
      controller: 'ShowOrderController'
    });
  }
]);


sampleApp.controller('ShowOrderController', function($scope, $routeParams) {


  $scope.order_id = $routeParams.orderId;
});

sampleApp.animation('.content',
  function() {
    return {
      enter: function(element, done) {
        var delay = $('.content').length === 2 ? 600 : 0; // if there are 2 .content (ngView) delay entrance, so the 1st can leave
        $(element).css({
          opacity: 0 // set the stage
        });
        $(element).delay(delay).animate({ // animate the opacity with delay if needed
          opacity: 1
        }, 600, done);
      },
      leave: function(element, done) {

        $(element).css({
          position: 'absolute', // use position absolute so the element won't jump down
          opacity: 1 // set the stage
        });
        $(element).animate({
          opacity: 0
        }, 600, done);

      }
    }
  }
)

В моем корпоративном приложении эта начальная задержка более заметна для пользователя из-за большего количества данных и инициализации переменных, которые я делаю.

Любой способ сделать его более плавным?

  • 0
    Я запутался, вы спрашиваете о задержке в 600 мс, которую вы добавили к анимации?
  • 0
    @ewahner 600ms - это время переключения между представлениями, что нормально. Если вы перезагрузите страницу с помощью Ctrl + R, а затем щелкните ссылку, это займет более 600 мс
Теги:

1 ответ

3
Лучший ответ

Начальная задержка вызвана запросом шаблона маршрута. Его можно устранить, скопировав шаблоны раньше,

sampleApp.run(function ($http, $templateCache) {
  $http.get('templates/show_order.html', { cache: $templateCache });
});

Или путем конкатенации шаблонов во время фазы сборки с помощью угловых шаблонов или grunt-html2js.

  • 0
    выглядит круто. Я постараюсь опубликовать, если это сработало для меня
  • 0
    Этот код работает в моем сложном приложении с несколькими областями без какого-либо сбоя кода. Благодаря тонну

Ещё вопросы

Сообщество Overcoder
Наверх
Меню