Develop Reference

Different Components under Same URL in Angular 4

I have a situation where I need to display two different components say A and B under same URL C. Currently, I' am displaying A which is a modal using Location service's go method which updates URL but doesn't activate Route to load appropriate components. This solution is working fine. The only problem related to this is that if user interacts with browser's back and forward buttons then the other component B mentioned in Route config is displayed which is not what I intended.
I only want to load B under same URL when user refreshes page. For example, if user clicks a button, then I' am loading A by updating browser's URL via Location service giving user the illusion that the URL is properly loaded. Now if at this point, users refreshes the page, I want to display B which is a completely different template.
Is there any way, where I can pass dynamic data in components while loading them without displaying dynamic data in URL?

Apex - Clear form when leaving page (also on redirect)

Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?

You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.

You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});

Custom URI using javascript

I encountered a e-commerce website which does the following whenever a filter is applied on the product list page:
For example when you click a "subcategory = 2" (link with href="/productcategory/category1/subcategory2") on the product list page "www.example.com/productcategory/category1"
URI that is displayed in the address bar is changed to mimic the filter request without reloading the entire page. i.e. "www.example.com/productcategory/category1/subcategory2"
An ajax call reloads only a part of the page according to the filter applied i.e. product with subcategory = 2 are displayed.
But also when you enter "www.example.com/productcategory/category1/subcategory2" in the address bar a new page is reloaded as usual.
I am not able to achieve this particular behavior using rewrite rule because whenever I click on a link with href="www.example.com/productcategory/category1/subcategory2" it is redirected according to the rewrite rule and a entire new page is reloaded.
My question:
1. how is it possible to change the URL in address bar but not reload the page?
2. Is it possible to have a rewrite rule which only redirects a page only when you explicitly enter the url in the address bar and hit enter?

To update the url displayed by the browser, without reloading the page, you can use the JavaScript History API - examples here.
I'm not clear what you mean by the second part of your question, rewrite rules get applied when a request is received by the web server - the server doesn't know/care about how the request was triggered, but if you are using the History API to update the url in the browser then no requests get sent to the server, this is purely an in-browser operation.

Gmail like ajax page refresh in liferay

We are a having search page(jsp) in our Liferay portlet which contains approximately 30 fields. When a person selects some parameter and press submit button then the action method is called and result are shown on the different jsp page. Which is the default behavior.
What we want to implement is that when a person submits the search form then the page must be ajax refreshed on the basis of those parameters.
What our understanding is that we can append the parameters in the URL and make the ajax call.Like in gmail if you do advanced search then the parameters are appended on the URL.
we can appended parameters into url so that when a user pastes url on the browser directly then a action method is called, jsp is loaded and then a java-script will read the parameters from the URL and fetch the proper data.
According to us the problem that we would be facing will be saving of the history in the browser so that whenever the page is changed due to ajax call and user clicks on the browser back button then the previous HTML state should be saved.
Is the above approach correct?
What could be the further issues that we can face while implementing the same?
How can we save the history so as to preserve the previous state?

This can be done by using the BBQ plugin. The BBQ plugin works on the hash tag change of the URL.
http://benalman.com/projects/jquery-bbq-plugin/

Recover page content when visiting back

I am building a small web site, and on one of the pages there is a d3.js/highchart visualization demo. The visualization is interactive, and can be modified by the user.
When the user leave this page and enter another html page by following a link in this demo page, the content of the page is not saved, and when he comes back, he has to modify the chart again. My question: is there any way to cache this demo page so that as long as the user does not close the browser page, it can be recovered?
My simplest idea is to have each client page a unique ID. So that I will save the status of the page when the user leaves, and when he comes back I can cover its content based on this ID. Then the question is how to implement this ID for client pages.

You can use History API here.
When a user changes the state of the chart, the page URL is updated with all the parameters needed for rendering the chart (via history.pushState call).
On page load you get the initial state (chart parameters) from the url and render the chart correspondingly.
A good thing with that approach is that you even can send such URL to another person, and they will see just the same customized chart.

You could also try storing the page state locally using either sessionStorage or localStorage (DOM Storage guide)

If you have two or more tabs I don't think there is a way to differentiate between then once they are closed. I would use Steve's idea about storing the ID in DB+cookie and when user come back to page I would provide them with a list of all their past modified charts based on cookie and DB query. Then they can choose which chart they want to reopen.

I can think of many ways to do something like this.
If it was me, I would simply store the users chart settings in a cookie, so when they navigate back to the page, you can simply read the cookie for the settings and use them to re-display the chart.
If you want to persists this longer, then send the settings to the server to be stored in a DB. The server can return a unique ID which is then stored in a cookie, or simple use the session cookie to associated the chart settings with a session.
An alternative which doesn't use cookies is to add chart settings to the 'back' url when you navigate away. When the user clicks to go back, the url contains the information necessary to restore the chart states. However, this doesn't work if they click the browser back button.