Да надо одним GET-запросом отдать всё. Это же элементарно, Ватсон, - сделать, как в почте Gmail, и безо всякого пресловутого ангуляра. Три больших (на всю страницу) div-а с контентом (отбросив их в шаблонизаторе в layouts) - и переключать ихний style.display - block/none
Вот, сварганил общую схему от скуки:
<!DOCTYPE html>
<html>
<head>
<title>NAV</title>
<meta charset="utf-8">
<style>
ul li {
display: inline-block;
cursor: pointer;
}
#one,
#two,
#three {
width: 80%;
height: 500px;
}
#one {
border: 5px solid red;
}
#two {
border: 5px solid green;
}
#three {
border: 5px solid blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>Красный</li>
<li>Зелёный</li>
<li>Синий</li>
</ul>
</div>
<div id="one" style="display:block"></div>
<div id="two" style="display:none"></div>
<div id="three" style="display:none"></div>
<script>
var red = document.getElementById('one');
var green = document.getElementById('two');
var blue = document.getElementById('three');
var ul = document.querySelector('ul');
ul.children[0].onclick = function() {
green.style.display = 'none';
blue.style.display = 'none';
red.style.display = 'block';
}
ul.children[1].onclick = function() {
red.style.display = 'none';
blue.style.display = 'none';
green.style.display = 'block';
}
ul.children[2].onclick = function() {
red.style.display = 'none';
green.style.display = 'none';
blue.style.display = 'block';
}
</script>
</body>
</html>