angularjs – Angular UI-Router如何创建一个“布局”状态?

前端之家收集整理的这篇文章主要介绍了angularjs – Angular UI-Router如何创建一个“布局”状态?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
给定一个HTML文件如下:
<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>

如何创建一个布局状态,用头模板填充“头”,使用页脚模板填充页脚,然后允许子状态填充空的ui视图?

我认为空的ui视图也可以命名为像ui-view =“main”。

一种方式是创建一个全局“根”状态。所以,每一个国家都会是孩子。
像root.pages,root.pages.edit,root.settings等
然后您可以为页眉和页脚提供默认模板。

另一种方式,不同的方法,我个人使用,是使用ng-include的页眉和页脚。

<body ng-controller="AppCtrl">
  <div id="header" ng-include="'header.tpl.html'"></div>
  <div class="main_container" ui-view>
  </div>
</body>

Btw。我在header.tpl.html中使用单独的控制器,这是主AppCtrl的子代:

<div id="header" ng-controller="HeaderCtrl"> ....

猜你在找的Angularjs相关文章