角度 ui-router 多视图顺序重要吗？答案

【问题标题】：Is angular ui-router multiple views order important?角度 ui-router 多视图顺序重要吗？
【发布时间】：2015-08-17 18:28:02
【问题描述】：

我有多个角度 ui-router 状态的视图。代码如下：

 .state('user.dash', {
     url: "/dash",
  views: {
    'contentView':{
      templateUrl: "...",
      controller: "..."
    },
    'headerView':{
      templateUrl: "...",
      controller: "..."
    },
   'leftSideMenuView':{
     templateUrl: "...",
     controller: "..."
   }
  }

由于我的“contentView”加载时间过长，因为它调用了几个 http 请求，我想知道（在角度概念中）这些多个视图的定义顺序是否重要？

我的意思是，如果在contentView 之前定义leftSideMenuView 可以帮助我先加载我的leftSideMenuView 而无需等待contentView？

【问题讨论】：

您应该在视图中使用解析...
所以阿克拉姆，Mikey 说的是正确的 - 您是否看到一个视图在另一个视图准备好之前弹出？通过使用解析来预加载您需要的内容，在数据准备好之前不会出现视图。这就是你想要的吗？至于实际答案 - 我不知道它们是否真的按顺序加载，因为它们是异步的，所以不会解决。
谢谢，米奇，VSO！我需要的是防止一个视图开始加载，直到另一个视图完成加载。我不在乎被调用的数据是否准备好。所以，我认为我应该在我的案例中使用视图之间的解析

标签： javascript angularjs angular-ui-router ionic

【解决方案1】：

您的问题的答案是否定的。请参阅以下 plunkr 以供参考：http://plnkr.co/edit/6xRCYOGsjBk1Wlrdeliz?p=preview.

如您所见，plunkr 显示了模仿其他人以及控制器建议的解决方案中的长时间操作的示例。我们可以看到，如果我们使用resolves，视图仍然会加载相同的数量，但是直到所有事情都解决后才会渲染子视图。如果我们改为从控制器进行调用，我们可以看到顺序无关紧要，因为每个视图都已经加载，并且调用之后由每个控制器处理。

代码：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="ui-router@0.2.15" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h4>First View</h4>
    <div ui-view="first"></div>

    <h4>Second View</h4>
    <div ui-view="second"></div>

    <h4>Third View</h4>
    <div ui-view="third"></div>

    <h4>Fourth View</h4>
    <div ui-view="fourth"></div>

    <h4>Fifth View</h4>
    <div ui-view="fifth"></div>
  </body>

</html>

// Code goes here

angular.module('app', ['ui.router'])
  .config(function($urlRouterProvider, $stateProvider) {
    $stateProvider
      .state('app', {
        url:'/',
        // templateUrl: 'layout.html',
        views: {
          'first': {
            template: '<div>{{text}}</div>',
            controller: 'theWaitCtrl',
            resolve: {
              'msg': function($q, $timeout, RandomNumberService) {
                var deferred = $q.defer();

                var waitDuration = RandomNumberService.getRandomNumber();

                $timeout(function() {
                  deferred.resolve('View resolved after ' + waitDuration + ' milliseconds');
                }, waitDuration);

                return deferred.promise;
              }
            }
          },
          'second': {
            template: '<div>{{text}}</div>',
            controller: 'theCtrl'
          },
          'third': {
            template: '<div>{{text}}</div>',
            controller: 'theCtrl'
          },
          'fourth': {
            template: '<div>{{text}}</div>',
            controller: 'theCtrl'
          },
          'fifth': {
            template: '<div>{{text}}</div>',
            controller: 'theWaitCtrl',
            resolve: {
              'msg': function($q, $timeout, RandomNumberService) {
                var deferred = $q.defer();

                var waitDuration = RandomNumberService.getRandomNumber();

                $timeout(function() {
                  deferred.resolve('View resolved after ' + waitDuration + ' milliseconds');
                }, waitDuration);

                return deferred.promise;
              }
            }
          }
        }
      });

    $urlRouterProvider.otherwise('/');
  })
  .controller('theCtrl', function($scope, $timeout, RandomNumberService) {
    $scope.text = 'loading...';
    var randomNumberOfMs = RandomNumberService.getRandomNumber();

    $timeout(function() {
      $scope.text = 'loaded after ' + randomNumberOfMs + 'milliseconds';
    }, randomNumberOfMs);
  })
  .controller('theWaitCtrl', function($scope, msg) {
    $scope.text = msg;
  })
  .factory('RandomNumberService', function() {
    function getRandomNumber() {
      return Math.floor(Math.random()*10000);
    }

    return {
      getRandomNumber: getRandomNumber
    };
  })
  ;

【讨论】：