Question

让HTML项目想要包含页眉和页脚，这样可以减少返工。请建议任何好方法。

我尝试使用ng-include及以下代码的AngularJS

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

但是<ng-include增加了调用JS函数的次数。

Answer 1

试试这个，我可以<Menu-Header></Menu-Header>在每页的标题

上

或者

<header ng-include="'includes/header.html'"></header>

这也是页脚

Answer 2

您指定＆＃34;任何客户端框架＆＃34;但每个框架都有自己的方式来做到这一点。对于角度，您可以查看具有布局页面并通过<ui-view/>更改正文内容。

或者您可以通过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) {}
            }
        })

Answer 3

像这样使用ui-router：

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>

Answer 4

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

链接示例：

<ul>
    <li>
        <p>14th April 2017</p>
        <ul>
            <li><p> 25 </p></li>
            <li><p> No data </p></li>
            <li><p> No data </p></li>
            <li><p> 28 </p></li>
        <ul>
    <li>
    <li>
        <p>13th April 2017</p>
        <ul>
            <li><p> 33 </p></li>
            <li><p> 22 </p></li>
            <li><p> No data </p></li>
            <li><p> No data </p></li>
        <ul>
    <li>
</ul>

其他选择：

使用基于组件的客户端框架，如AngularX或React
pug只是众多Html模板库中的一个（Handlebars，Vue，...）
如果您有半静态网站，Jekyll将从您的源文件创建静态html并支持html包含
使用支持包含的PHP或其他服务器端语言。或者在所述语言中使用一些MVC框架（前PHP有Laravel）

使用任何客户端框架

4 个答案: