Storing a ton of HTML on one page

I help create an HTML client for a game that I collaborate with others.

This client will require several scenes / pages, such as login, hall, actual game page, etc.

Generally, I would be fine with navigating through and from pages. However, the client must have constant communication with the server through Websocket, so it cannot go from the page.


Option 1. Put everything in one file

Instead of having each scene on its own separate page, just copy all the HTML together.

Then, when you need one scene, just hide all the other scenes.

I don’t think that this method is the way to go: from what I know about HTML and web practices, this is not a very smart practice.


Option 2: jQuery .load()

Using the jQuery handy-dandy .load , an external HTML file can be easily loaded into the current HTML file.

It seems to me that this may be the best way. However, I am not very good at how this method works, so I don’t know if this will lead to road bumps.


Option 3:

I need help here. If one of the two options above is the best way, what is the best option for my situation?


Notes

  • I am not looking for speed here; this is normal if there is some delay between loads.
+4
source share
3 answers

Not sure about your backend, but it looks like you're looking for a single page solution.

I recommend AngularJS , which is currently supported by Google.

+2
source

Others mentioned Angular, but I will just throw away the KnockoutJS recommendation. Knockout has a less steep learning curve than AngularJS, and although it doesn't have as many features as Angular, the latest version has better browser support.

Both knockouts and Angular have excellent documentation and tutorials available through their websites.

+2
source

I would recommend Angular 2. Since you seem to be new to the interface (correct me if I am wrong), starting with Angular 2 would be great for 1, because then you can find out this really good JS framework only once. This will help you stay organized and prevent you from making your markup dirty.

+1
source

All Articles