角度ui路由器多个视图的顺序重要吗？

Question

I have multiple views in angular ui-router state. 我在角度ui路由器状态下有多个视图。 code below: 下面的代码：

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

And as my "contentView" takes too much time to load, because it is calling several http requests, I want to know if (in angular concept) the definition order of these multiple views is important? 而且由于我的“ contentView”要加载太多时间，因为它正在调用多个http请求，所以我想知道（在角度概念上）这些多个视图的定义顺序是否重要？

I mean, if the definition of leftSideMenuView before contentView could help me to load first my leftSideMenuView without waiting for contentView ? 我的意思是，如果contentView之前的leftSideMenuView的定义可以帮助我先加载我的leftSideMenuView而无需等待contentView ？

Answer 1

The answer to your question is no. 您的问题的答案是否定的。 Please see the following plunkr for reference: http://plnkr.co/edit/6xRCYOGsjBk1Wlrdeliz?p=preview . 请参阅以下plunkr供参考： http ://plnkr.co/edit/6xRCYOGsjBk1Wlrdeliz?p=preview。

As you can see, the plunkr shows examples of both mimicking a long operation on both as in a resolve as suggested by others as well as from the controller. 如您所见，plunkr显示了一些示例，它们既模仿了其他人的建议，也模仿了控制器的建议，既模仿了长时间操作。 What we can see is that if we use resolves, the view will still take the same amount to load, but the subviews will not be rendered until EVERYTHING has been resolved. 我们可以看到的是，如果我们使用resolves，则视图仍将加载相同量的内容，但是只有解决了所有问题之后，子视图才会呈现。 If we instead make the calls from the controllers, we can see that order does not matter since each the view has already loaded and the calls are handled by each of the controllers after that. 如果我们改为从控制器进行调用，则可以看到顺序无关紧要，因为每个视图都已经加载，并且此后的调用由每个控制器处理。

The code: 编码：

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

角度ui路由器多个视图的顺序重要吗？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-17 22:06:34

角度ui路由器多个视图的顺序重要吗？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-17 22:06:34

解决方案1
0 已采纳 2015-08-17 22:06:34