ui路由器保持视图的顺序

Question

我正在尝试设计一个按订单加载页面部分的SPA，

var main = {name : 'main',
    url  : "",
    abstract : true,
    views :{
    'header' : {//main template},
    'content' : {//main template},
    'footer' :{//main template}
}};

但当我创建另一个名为“single_post”的状态时，如

single_post = {name : 'single_post',
    url : "/sp",
    views : {
    'content' : {
    templateUrl : "some template" }
    }    
};

$stateProvider.state(main);
$stateProvider.state(single_post);

加载main后加载single_post模板!! 我该怎么做才能保持页面中视图的顺序？

Answer 1

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

$stateProvider.state('users.profile', {
  url: '/:id',
  templateUrl: 'views/users.profile.html',
  controller: 'UsersController',
  resolve: {
    user: function() {
      //function code
    },
    tasks: function() {
      //function code
    }
  }
}); 

在此，页面不会加载，直到执行用户和任务功能。

另一种选择是使用$stateChangeSuccess事件侦听器仅在状态成功转换到时调用控制器函数。您可以在此处加载shell页面，并在控制器返回数据时填充。