ui路由器保持视图顺序答案

【问题标题】：ui router keep the order of viewsui路由器保持视图顺序
【发布时间】：2017-04-15 15:47:06
【问题描述】：

我正在尝试设计一个按顺序加载页面部分的 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 模板！！我应该怎么做才能保持页面中视图的顺序？

【问题讨论】：

你的问题能说得清楚一点吗？
我正在尝试显示不同的状态，它们几乎都有相同的视图，但我想更改每个状态的中间视图（内容）。
这些都不是很清楚....请花时间阅读How to Ask。然后edit question 提供适当详细的问题描述
一个简单的<ui-view> 在正确的地方会做你想做的事

标签： javascript angularjs angular-ui-router single-page-application

【解决方案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 页面，并在控制器返回数据时进行填充。

【讨论】：