{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ▲ chillily 的问题《Using Django template inheritance with ngroute - w》','https://www.manongdao.com/q-843509.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This is my 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>
This is an example of a template which inherits base.html (call it 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 block is to set the ng-app which will be used for the web page. The head block is to load the relevant JS and CSS files. The body block is where the body of the HTML page goes. However, I am using ngroute to load webpages. This is the routing and JS:
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/new', {
templateUrl: 'static/templates/new.html'
})
self.change = function() {
$location.url("/new");
};
So in home.html, when the form is submitted, the URL changes to /new (which serves the page new.html. This is 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 %}
So for every template which inherits base.html and gets loaded, I want to be able to redefine / override the blocks again. Where do I put <div ng-view></div> so that I will be able to redefine the blocks with correct code structure?
I tried putting it in home.html (the page which the app loads first) right underneath <div class="container"></div>, but then it doesn't override the blocks. I can put it in base.html above / outside the <html{% block html %}{% endblock %}>, but that would be placing a <div> outside of <html> which isn't proper code structure. Any idea how to do this?