Oi Luiz. O projeto do curso de JavaScript avançado é uma caricatura de uma SPA criada por frameworks do mercado como Angular, React, Ember.
Todavia, em uma aplicação SPA robusta, há um sistema de rotas que permite o carregamento dessa ou daquela view de acordo com o endereço inserido na barra de endereço no navegador. Em vez do navegador realizar a busca, quem faz é o JavaScript evitando que a página seja carregada.
No curso avançado eu não implemento um roteador, até porque eu sairia do objeto que é ensinar JavaScript e estaria criando um framework do zero e essa não era a intenção.
A intenção sempre foi caricaturar recursos de frameworks famosos para motivar o uso de recursos sofisticados da linguagem JavaScript.
Então, caso você queria usar a mesma estrutura, cada página da sua aplicação terá que ser um arquivo html
em separado, cada uma com seu controller. Tudo bem?
Porém, se você esta curioso em como seria essa implementação de carregação de views de acordo com o endereço (rota) acessada pelo usuário, pode verificar meu projeto no github, o routerix
. Eu criei esse projeto inicialmente para tentar encaixá-lo no curso de JavaScript avançado, mas desistir porque para funcionar em sua plenitude, eu teria que lidar com dezenas de questões de performances, deregistrar listeners e eu estaria realmente criando um framework. Todavia, o código dele funciona para se ter uma ideia.
https://github.com/flaviohenriquealmeida/routerix
Em sua, meu aluno, se o escopo da sua aplicação é pequeno e não deseja criar uma SPA (Single Page Application), pode usar o que aprendeu por página. Se deseja criar uma SPA, ai sugiro partir para um framework. A boa notícia é que vários dos conceitos que você precisa ter para usar esses framewoks você já consolidou no projeto I, II, III dos cursos de JavaScript avançado.
Espero que tenha conseguido atendê-lo com essa minha resposta. Qualquer coisa é só me dizer.
Sucesso e bom estudo, meu aluno.