How to organize html in single page web application?

Question

css

The question arose, how to display html content in single-page web applications?
For example, there is a registration screen and there is a screen for directly displaying content, how to fit them into one index.html?
You can transfer via json, for example, you can hide individual blocks and open them at the right time, but no one does this (as I understand it), but I just can’t find how to do it right.

Answer 1

Возьмите какой нибудь фреймворк для создания SPA. Например Ember.js
Пройдите по нему коротенький курс, например этот: Warming Up With Ember.js
И многое станет понятным.

Answer 2

Мне кажется без обработки на сервере нормального решения не получится.

For example, there is a registration screen and there is a screen for directly displaying content.

This means that the content should not be readable before registration, which means that it should not enter the browser at all in any form. Only after registration. At least two files, or one but using the functional part on the server. And in this case, everything is very simple and there are a lot of examples.

Answer 3

If this is a web application (and not just a page), then you can make AJAX requests to the server and get the desired content.
Content can always be hidden inside , but if this content should be shown only after registration / login, then this is not suitable, because. the user can simply open the source code of the page and see the content.