这是我的base.html
:
<!DOCTYPE html>
<html{% block html %}{% endblock%}>
{% load static from staticfiles %}
<head>
<meta charset="utf-8">
<title>{% block title %}Base{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script src="{% static 'js/angular.js' %}"></script>
<script src="{% static 'js/angular-route.js' %}"></script>
<base href="/">
{% block head %}{% endblock %}
</head>
<noscript> <!-- If JS is disabled, the CSS below will run, causing everything inside "bodyContainer"
to no appear and causing the "noscriptmsg" to appear. -->
<style type="text/css">
.bodyContainer {display:none;}
.noscriptmsg {display: block;}
</style>
</noscript>
<div class="noscriptmsg">
<p>Please enable your browser's JavaScript in order to view this website.</p>
</div>
{% block body %}
<span class='cerrorMessage' ng-bind="ctrl.cerrorMessages"></span>
{% endblock %}
</html>
这是继承的模板的示例base.html
(叫它home.html
):
{% extends "base.html" %}
{% load static from staticfiles %}
{% block html %} ng-app="AuthenticationApp"{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}">
<script src="{% static 'js/home.js' %}"></script>
{% endblock %}
{% block body %}
<body ng-controller="MainCtrl as ctrl" class="bodyContainer">
<div class="container">
<div class="row">
{{ block.super }}
</div>
<div class="row">
<form ng-submit="ctrl.change()" class="form-horizontal" name="myForm"></form>
</div>
</div>
</body>
{% endblock %}
The html
块是设置ng-app
将用于网页。这head
block是加载相关的JS和CSS文件。这body
block 是 HTML 页面主体所在的位置。但是,我正在使用ngroute
加载网页。这是路由和JS:
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/new', {
templateUrl: 'static/templates/new.html'
})
self.change = function() {
$location.url("/new");
};
So in home.html
,提交表单后,URL 更改为/new
(其服务于页面new.html
。这是new.html
:
{% block html %} ng-app="NewApp"{% endblock %}
{% body head %}
<link rel="stylesheet" type="text/css" href="{% static 'css/new.css' %}">
{% endblock %}
{% body block %}
<h5>NEW CONTENT</h5>
{% endblock %}
所以对于每个继承的模板base.html
并被加载,我希望能够再次重新定义/覆盖块。我该放在哪里<div ng-view></div>
这样我就能够用正确的代码结构重新定义块?
我试着把它放进去home.html
(应用程序首先加载的页面)就在下面<div class="container"></div>
,但它不会覆盖这些块。我可以把它放进去base.html
上面/外面<html{% block html %}{% endblock %}>
,但这将放置一个<div>
在外面<html>
这不是正确的代码结构。知道如何做到这一点吗?