个人中心
gpt4 book ai didi

javascript - Angular ui-router 多个 View 顺序重要吗？

转载 作者：行者123 更新时间：2023-11-28 07:01:58 26 4
gpt4 key购买 nike

我在 Angular ui-router 状态下有多个 View 。代码如下:

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

由于我的“contentView”需要太多时间来加载，因为它正在调用多个http请求，我想知道(在 Angular 概念中)这些多个 View 的定义顺序是否重要？

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

最佳答案

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

正如您所看到的，plunkr 显示了两个模仿长操作的示例，就像其他人以及 Controller 建议的解析一样。我们可以看到，如果我们使用解析， View 仍将需要相同的加载量，但 subview 将不会渲染，直到所有内容都已解析。如果我们从 Controller 进行调用，我们可以看到顺序并不重要，因为每个 View 都已经加载，并且调用之后由每个 Controller 处理。

代码:

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

关于javascript - Angular ui-router 多个 View 顺序重要吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32057249/

26 4 0
文章推荐： javascript - 需要禁用下拉菜单的淡出功能(仅)
文章推荐： javascript - ThreeJS 带按钮的相机控制
文章推荐： css - 文本阴影未出现在打印中
文章推荐： javascript - 预加载器无法在线工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com