Question

说到ui.router模块，我可以想到三种不同的方法来为每个视图设置默认的页眉和页脚：

DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER

1。 ng-include - 将页眉/页脚附加到您的初始.html文件（index.html）。

<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>

1.1。将代码粘贴到index.html

<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>

2。使用指令解析页眉和页脚。

home.html的

<!-- content -->
<!-- /content -->
<footer></footer>

footerDirective.js

module.directive('footer', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "footer.html",
        controller: ['$scope', '$filter', function ($scope, $filter) {
        }]
    } 
});

http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/

3。在ui.router上创建额外的状态，没有网址。

然后状态包装器将包含页眉和页脚，并且不会被调用。

$stateProvider
.state('wrapper', {
    templateUrl: 'wrapper.html', // contains html of header and footer
    controller: 'WrapperCtrl'
})
.state('wrapper.home', {
    url: '/',
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
});

哪一个更受欢迎？或者，是否有更理想的方法来使用Angular 1.x？

Answer 1

还有另一种方法可以利用州的views属性。它使人们能够为某个状态定义多个命名视图。 UI docs

考虑以下示例，其中状态myapp有三个命名视图，其中内容视图将是包含动态内容的视图。

$stateProvider
    .state('myapp', {
        views: {
          'header': {
            template:'header <hr />',
            controller:'mainController as main'
          },
          'content': {
            template:'<div ui-view></div>'
          },
          'footer': {
            template:'<hr /> footer',
            controller:'mainController as main'
          }
       }
   })
  //States below will live in content view
  .state('myapp.one', {
    template:'View 1 <button ui-sref="myapp.two">next page</button>',
    controller:'firstController as first',
  })
  .state('myapp.two', {
    template:'Another page <button ui-sref="myapp.one"> Go back</button>',
    controller:'secondController as second',
  })

HTML将如下所示：

<div ui-view="header"></div>
<div ui-view="content"><!-- Where your content will live --></div>
<div ui-view="footer"></div>

Jsbin example

Angular ui.router默认页眉

1。 ng-include - 将页眉/页脚附加到您的初始.html文件（index.html）。

2。使用指令解析页眉和页脚。

3。在ui.router上创建额外的状态，没有网址。

1 个答案: