带有“主视图"的 ui-router 全局状态 [英] ui-router global state with "main view"

查看:21
本文介绍了带有“主视图"的 ui-router 全局状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有人可以给我指出一个管理 ui-router 全局状态的例子吗?我正在尝试实现一个通用站点模板,该模板在所有页面上都包含页眉和页脚,主视图随该视图中的嵌套视图一起变化.

应该出现在所有页面上,有自己的控制器.

主视图 包含不同的页面"和嵌套视图

应该出现在所有页面上,有自己的控制器.

我会尽量详细说明,这是我当前的角度路由状态:

<div class="wrap"><div ng-include="'partials/header.html'"></div><div ng-view></div><div ng-include="'partials/footer.html'"></div>

我想迁移到 ui-router,但无法实现相同的目标.我需要所有页面上的页眉和页脚以及一个 ui 视图作为主要内容,它将包含所有视图/嵌套视图和统计数据

谢谢

解决方案

那肯定对你有用.您只需要确保它是 ui-view 而不是 ng-view.这是我现在在类似应用上使用的内容:

<div ng-include src="'app/templates/nav.html'" id="global-nav"></div><div ui-view></div><footer ng-include src="'app/templates/footer.html'"></footer>

can someone please point me to an example of managing global states for ui-router? i'm trying to implement a general site template that contains on all pages a header and a footer, with a main view that changes along with nested views within that view.

<div ui-view="header"> should appear on all pages, has its own controller. <div ui-view>main view that holds the different "pages" and nested views <div ui-view="footer"> should appear on all pages, has its own controller.

i will try to elaborate, this is my current state with angulars routing:

<body>
  <div class="wrap">
      <div ng-include="'partials/header.html'"></div>
      <div ng-view></div>
      <div ng-include="'partials/footer.html'"></div>
  </div> 
</body>

i would like to migrate to ui-router, but cannot achieve the same. i need the header and the footer on all pages and an ui-view as main content that will hold all views/nested vies and stats

Thanks

解决方案

That will definitely work for you. You'll just need to make sure it's ui-view insteadl of ng-view. Here's what I'm using now on a similar app:

<div ng-include src="'app/templates/nav.html'" id="global-nav"></div>
<div ui-view></div>
<footer ng-include src="'app/templates/footer.html'"></footer>

这篇关于带有“主视图"的 ui-router 全局状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆