Question

我有一个控制器，用于支持不同路径上的几个模板。这些html模板非常繁重，因为它们包含大型表，包含许多行以及一些控制器逻辑操作表格单元格，这导致了这一点：

当我第一次在浏览器中加载页面时，我切换到新路由，路由变化很快，然后页面慢慢慢慢完成加载。
然后，如果我来回切换到上一个路线，路线基本冻结，然后BOM !!，路线改变，我看到已经加载页面的新路线。

我正在使用教程中的基本路线设置。我想我错了。 ui-router太忙于在这个单独的ui-view中注册和取消注册我的模板。

<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>

<ui-view></ui-view>

和

var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    templateUrl: 'slowRoute1'
  }

  var aboutState = {
    name: 'about',
    url: '/about',
    templateUrl: 'slowRoute2'
  }

  $stateProvider.state(helloState);
  $stateProvider.state(aboutState);
});

连接这种重型路线的正确方法是什么？

Answer 1

您可以使用resolve，这不会加载您的页面，直到解决加载中写入的内容为止，例如：

$stateProvider.state('users.profile', {
  url: '/:id',
  templateUrl: 'views/users.profile.html',
  controller: 'UsersController',
  resolve: {
    user: function($stateParams, UserService) {
      return UserService.find($stateParams.id);
    },
    tasks: function(TaskService, user) {
      return user.canHaveTasks() ?
        TaskService.find(user.id) : [];
    }
  }
});

在此，页面不会加载，直到执行user和tasks函数。

对于您的重新加载问题，您可以使用$state.reload()方法。此功能不会重新初始化控制器，这意味着将重新加载结果，但您的范围属性不会相应更新。

Answer 2

建议使用resolve表示除非结果得到解决，否则不会输入视图。

如果特别是动态生成表行，则另一个选项是使用$stateChangeSuccess事件侦听器仅在成功转换状态时调用重控制器函数。您可以在此处加载shell页面，并在控制器返回数据时填充

https://github.com/angular-ui/ui-router/wiki#user-content-state-change-events

使用Angular ui-router作为重模板

2 个答案: