角度ui路由器多個視圖的順序重要嗎？

Question

我在角度ui路由器狀態下有多個視圖。 下面的代碼：

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

而且由於我的“ contentView”要加載太多時間，因為它正在調用多個http請求，所以我想知道（在角度概念上）這些多個視圖的定義順序是否重要？

我的意思是，如果contentView之前的leftSideMenuView的定義可以幫助我先加載我的leftSideMenuView而無需等待contentView ？

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

角度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