角UI的路由器如何创建和QUOT;布局＆QUOT;州？ [英] Angular UI-Router How to create a "layout" state?
问题描述
由于HTML文件，像这样：
Given an HTML file like so:
<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>
如何将一个建立，填补了头有头模板，用模板页脚页脚的布局状态，然后让孩子的状态，以填补空UI的看法？
How would one create a layout state that fills the "header" with a header template, the footer with a footer template, and then allow child states to fill the empty ui-view?
我想空的用户界面视图也可以被命名为类似的用户界面视图=主。
I suppose the empty ui-view could also be named something like ui-view="main".
推荐答案
的一种方法是建立一个全球性根的状态。因此，每一个状态将是它的孩子。
像root.pages，root.pages.edit，root.settings等。
然后，你可以为页眉和页脚的默认模板。
One way is to make a global 'root' state. So, each and every state will be it's child. Like root.pages, root.pages.edit, root.settings, etc. Then you can provide default templates for header and footer.
另一种方法，不同的方法，我用个人，就是用 NG-包括页眉和页脚。
Another way, different approach, that I use personally, is to use ng-include for header and footer.
<body ng-controller="AppCtrl">
<div id="header" ng-include="'header.tpl.html'"></div>
<div class="main_container" ui-view>
</div>
</body>
顺便说一句。我在header.tpl.html使用单独的控制器，也就是主AppCtrl的孩子：
Btw. I use seperate controller in header.tpl.html, that is a child of main AppCtrl.:
<div id="header" ng-controller="HeaderCtrl"> ....
这篇关于角UI的路由器如何创建和QUOT;布局＆QUOT;州？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
