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

DEFAULT HEADER

DEFAULT FOOTER

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

1.1.将代码粘贴到index.html中

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

home.html的

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. 在没有url的情况下在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有更好的方法吗？

1> cbass..：

---

还有另一种方式可以利用该州的views财产.它使人们能够为某个状态定义多个命名视图.UI文档.

请考虑以下示例,其中状态myapp具有三个命名视图,其中内容视图将是具有动态内容的视图.

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

HTML将如下所示:

Jsbin的例子

---

这样做的一个好处是,您可以在子状态中重新定义页眉或页脚,例如`.state('myapp.one.substate',{views:"header @ myapp":{template:"

New myapp.one.substate的标题.*"}})`