如何让 AngularJS 中的所有网页共享一个公共标题? | header

header

关注(28)粉丝(399)

如何让 AngularJS 中的所有网页共享一个公共标题?

本文介绍了如何让 AngularJS 中的所有网页共享一个公共标题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

可能有更好的方法来实现共享的公共标头.由于我仍然认为自己是 html 的新手(但不是编程的新手)，我愿意接受更好的建议.

谢谢.

有用的回复提到了使用 PHP.但是，我使用 AngularJS 作为前端，而我的 PHP 后端只是一个纯粹的 REST 服务器.我更喜欢使用 AngularJS 的方式而不是 PHP 的方式.

解决方案

AngularJS 解决方案如下所示:

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

</html>

main.js:

var myApp = angular.module('myApp', []);函数 HeaderCtrl($scope) {$scope.header = {name: "header.html", url: "header.html"};}

header.html:

标题内容放在这里 </p>

我之所以没有简单地建议一个解决方案，例如:<div ng-include="'header.html'"> 是为了避免加载标题时出现任何延迟.有关更多信息，请查看 angularjs- 将 ng-include 指向包含脚本指令的部分.

或者 jQuery 会喜欢这个.

<头><script src="jquery.js"></script><脚本>$(函数(){$("#headerContent").load("header.html");});<身体><div id="headerContent"></div></html>

最终的 PHP 解决方案将如下所示:

<头><身体><?php include('header.html');?></html>

祝您学习顺利！

I would like to have a header.html which defines how the header for all my web pages will look like. How can I insert this header.html into the other web pages at the top?

There may be better methods around to achieve a common header to be shared around. As I still consider myself a newbie to html (but not to programming), I am open to better suggestions.

Thank you.

EDIT: Helpful replies have mentioned using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. My preference is to do it the AngularJS way and not the PHP way.

解决方案

An AngularJS solution would look like this:

<!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>

The reason I did not simply advise a solution such as: <div ng-include="'header.html'"> is to avoid any delay in loading the header. For more information have a look at angularjs - Point ng-include to a partial that contains a script directive.

Alternatively a jQuery would like this.

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

Finally a PHP solution would look like this:

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

Best of luck learning!

这篇关于如何让 AngularJS 中的所有网页共享一个公共标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-28 13:25