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?