Question

当用户点击超链接并且我更改ng-view时，第一次需要更多时间但是下次更换时，从一个视图到另一个视图的切换是平滑的，没有任何延迟。我在这里放了一个样本plunker：http://plnkr.co/edit/cINyIOpJBEAsa2pUk3tP?p=preview

来自那个plunker的app.js看起来像：

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);

      }
    }
  }
)

在我的企业应用程序中，由于我所做的更多数据和变量初始化，用户更容易看到此初始延迟。

有什么方法可以让它更顺畅吗？

Answer 1

初始延迟是由路由模板请求引起的。可以通过尽早缓存模板来消除它，

sendMail()

或者通过grunt-angular-templates或grunt-html2js在构建阶段连接模板。

第一次加载角度视图故障

1 个答案: