如何在AngularJS中的所有网页上共享一个公共标题？

一尘不染

如何在AngularJS中的所有网页上共享一个公共标题？

angularjs

我想有一个header.html，它定义我所有网页的标题如何。如何将此header.html插入顶部的其他网页？

可能会有更好的方法来实现要共享的公共标头。由于我仍然认为自己是html的新手（但不适合编程），因此我愿意接受更好的建议。

谢谢。

编辑：有用的答复提到了使用PHP。但是，我使用AngularJS作为前端，而我的PHP后端仅仅是一个纯REST服务器。我更喜欢用AngularJS方式而不是PHP方式。

阅读 200

2020-07-04

共1个答案

一尘不染

AngularJS解决方案如下所示：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <script src='angular.js'></script>
  <script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
  <div ng-include src="header.url"></div>
  <script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>

main.js：

var myApp = angular.module('myApp', []);

function HeaderCtrl($scope) {
    $scope.header = {name: "header.html", url: "header.html"};
}

header.html：

<p> Header content goes here </p>

我之所以没有简单地建议诸如以下的解决方案，<divng-include="'header.html'">是为了避免加载标头时出现任何延迟。另外，jQuery也会这样。

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#headerContent").load("header.html"); 
    });
    </script> 
  </head> 
  <body> 
     <div id="headerContent"></div>
  </body> 
</html>

最后，PHP解决方案将如下所示：

<html> 
  <head> 
  </head> 
  <body> 
    <?php include('header.html'); ?>  
  </body> 
</html>

祝你好运学习！

2020-07-04