use*_*486 18 html html5 angularjs
我想有一个header.html,它定义了我所有网页的标题如何.如何将此header.html插入顶部的其他网页？
可能有更好的方法来实现共享的公共头.由于我仍然认为自己是html的新手(但不是编程),我愿意接受更好的建议.
谢谢.
编辑:有用的回复提到使用PHP.但是,我使用AngularJS作为前端,我的PHP后端只是一个纯REST服务器.我的偏好是以AngularJS方式而不是PHP方式.
Bre*_*ett 24
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>
我之所以不简单地建议解决方案的原因是:<div ng-include="'header.html'">避免加载标头的任何延迟.有关更多信息,请查看angularjs - Point ng-include到包含脚本指令的partial.
或者,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>
祝你好运!
我通常处理这个的方式,它允许不只是一个标题,是有一个 shell.html
它可能看起来像这样:
<div ng-controller="ShellController">
<div ng-include="'app/shell/header/header.html'"></div>
<div ng-view></div>
<div ng-include="'app/shell/footer/footer.html'"></div?>
</div>
你在哪里是ng-including静态位,而你正在使用Angulars ngRoute(或ui-router)
提供的其他答案错过了使用Angular.js的客户端.Angular实际上是为这个概念而设计的.使用Angular.js有几种不同的方法来实现客户端模板.
使用Angular作为单页面应用程序(SPA),您可以在其中动态更改单个HTML文档上的内容,而不是重定向到不同的页面.
使用Angular Directives封装常见的页面功能.
您可以使用2的组合来实现几乎任何页面布局的组合.
使用角度路由提供程序或Angular UI-Router之类的插件,您可以定义一个公共HTML页面,并在HTML页面中使用该ng-view指令来表示在运行时动态替换页面的一部分.然后,您可以定义填充动态部分的html模板.
使用指令,您可以创建新的HTML元素来设计更具表现力的页面布局.例如,您可以定义一个my-menubar包含HTML模板,javascript元素甚至业务逻辑的指令,然后只需使用类似<div my-menubar /> 指令的语法就可以在任何页面上包含菜单栏非常强大,我强烈建议您在Angular开发人员指南中阅读它们.
可能使用这些功能的简单页面示例:
<div ng-controller=MainController>
<div main-menu />
<div ng-view> </div>
<div page-footer />
</div>
最重要的是,您不需要服务器来执行可重现代码的逻辑,因为Angular.js就是为此目的而设计的.
| 归档时间： |
|
| 查看次数： |
41235 次 |
| 最近记录： |