Javascript 使用任何客户端框架在HTML中包含页眉和页脚的最佳方法

让HTML项目包含页眉和页脚，这样可以减少返工。 请提出好办法

我尝试了AngularJS和ng include及以下代码

var app = angular.module("arstlApp", []);
app.controller("arstlCtrl", function($scope, $rootScope,$timeout) {
  $rootScope.$on('$includeContentLoaded', function() {
    $timeout(function(){
         _autoload();
    });
  });
});

---

但是您可以指定任何客户端框架，但每个框架都有自己的实现方式。例如，对于angular，您可以查看布局页面并通过更改正文内容

或者您可以通过stateProvider处理此问题：

$stateProvider
        .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            header: {
                template: '<h1>Header</h1>',
                controller: function($scope) {}
            },
            footer:  {
                template: '<p>Footer</p>',
                controller: function($scope) {}
            }
        })

试试这个，我可以在每一页的页眉

或

---

同样，对于页脚，使用如下ui路由器：

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: '/about',
          views: {
            'container@': {
              templateUrl: 'aboutPage.html'
            }
          }
        });    

    }]);

在index.html中：

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

---

如果你真的不关心哪个框架：考虑使用。

链接中的示例：

doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug

其他选择：

使用基于组件的客户端框架，如AngularX或React 帕格只是众多Html模板库中的一个，比如Handlebar、Vue等等。。。 如果您有一个半静态的网站，将创建静态html从您的源文件支持html包括 使用PHP或其他支持includes的服务器端语言。或者在PHP拥有的Laravel语言中使用一些MVC框架