Angular UI-Router如何创建"布局"状态？

Question

给定一个像这样的HTML文件:

<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>

如何创建一个布局状态,用标题模板填充"标题",页脚带有页脚模板,然后允许子状态填充空的ui视图？

我想空的ui-view也可以命名为ui-view ="main".

Answer 1

试试这个,几乎你的页眉和页脚是静态模板,但你可以添加控制器,以防你需要添加一些动态功能,默认情况下将包含页眉和页脚,因为路线是'',所以试试看:

 app.config(['$stateProvider', function($stateProvider){
        $stateProvider
        .state('root',{
          url: '',
          abstract: true,
          views: {
            'header': {
              templateUrl: 'header.html',
              controller: 'HeaderCtrl'
            },
            'footer':{
              templateUrl: 'footer.html',
              controller: 'FooterCtrl'
            }
          }
        })
        .state('root.home', {
          url: '/',
          views: {
            'container@': {
              templateUrl: 'homePage.html'
            }
          }
        })
        .state('root.other', {
          url: '/other',
          views: {
            'container@': {
              templateUrl: 'other.html'
            }
          }
        });    

    }]);

编辑: 对我来说,设置视图的最佳位置应该在index.html中,如下代码:

<header>
    <div ui-view="header"></div>
</header>
<div ui-view="container">
</div>
<footer id="mainFooter" ui-view="footer">
</footer>

Answer 2

一种方法是建立全球"根"状态.所以,每个州都将是它的孩子.像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>

顺便说一句.我在header.tpl.html中使用单独的控制器,这是主AppCtrl的一个孩子:

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

Answer 3

实际上有一种非常简单的方法可以做到这一点.

1.创建布局状态

$stateProvider
  .state('master', {
    abstract: true,
    views: {
      layout: {
        templateUrl: '/layouts/master.html',
      }
    }
  });

2.在布局中使用未命名的视图状态

<!-- layouts/master.html -->
<div ui-view></div>

3.创建视图状态

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: '/views/home.html',
    parent: 'master',
  });

4.使用命名布局状态作为根状态

<!-- home.html -->
<body ui-view="layout"></body>