Develop Reference

Dynamically updating content (eg. clicking button updates div) and update url on website without refresh, then stay on the same page on manual refresh

So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!

This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!

Load different Angular app when clicking link

I have an interesting situation. I need to navigate from one Angular app to a second one when clicking a link.
Other App
When I click this link the url updates to /otherApp, but the app itself does not load until I refresh the page. I know I'm missing something simple, but can't seem to put my finger on it.

AngularJS navigate by service breaks when refreshing

Still learning AngularJS. I have a setup where I load a subpage by choosing from a list on the main page. The pick is then stored in a service. Once the subpage loads it fetch that service value and use that info to lookup in another list. Problem is that if I reload the subpage the service resets and the pages gets displayed incorrectly because the service value has been reset as well..
Is there a good way to go around this? - I love code snippets as answer or link to them (easier to understand) :-)
I'm using auto reload when developing, so it becomes quite annoying sometimes.. I have to go back the main page and do a reload and navigate back.

Multiple views side-by-side windows-like AngularJS

I want to do something similar to Azure portal with ui-router/angularjs.
When a user clicks on a link, I want to open a new window and load the template related to the link. It's possible to "drag" all windows from left to right or right to left when many are open. I thought it would be possible to manage it by using a ui-view for each new window opened, but it seems that we can't setup dynamic view name for a state. What is the best way to achieve this?
Thank you!

Select Remote View Programmatically

I'm trying out Kendo Mobile. I'm really impressed with it so far. I've read this tutorial and am modifying it a bit for my needs.
I've added an additional element to the tabstrip to include a "login" view. Because my login form is long and complex, I don't want the actual code in index.html. So, I've included it in a separate html file : login.html.
Now, when the user clicks on the login icon on the tabstrip, the GUI automatically transitions to the login form. All good.
When the GUI loads, I am using JS to detect if the user is logged in our not. If not, I want the GUI to automatically load the login page. I'm able to do that using Kendo's "navigate" function. Unfortunately, that takes the user out of the layout from the main application page. Is there anyway to have an external html page that when navigated to will contain the main applications layout?
<footer data-role="footer">
<div data-role="tabstrip" id="defaultTabStrip">
Home
Home
Foo
Home
</div>
</footer>
This properly loads the login.html page, but I have no GUI around it. I'd like to navigate to this content, but inside my main layout.:
if ( ! loggedIn ) {
app.navigate("login.html");
}

So ... this is awkward.
Now, when I use this :
if ( ! loggedIn ) {
app.navigate("login.html");
}
It all works properly. I didn't do anything at all. I just tried again later and the login page loaded properly within the GUI layout. So, I guess we can consider this solved.