Today I encountered a very strange problem in the project. I used oclazyload to lazy load the angular module. After refreshing the page, I clicked the fallback button and could not return to the previous page. It is estimated that the lazy loading mechanism was used to destroy the state association inside angular, resulting in the inability to return to the previous state (the $stateChangeStart event of the ui-routre in the fallback button will not be triggered). Of course, this is just a guess, and the source code has not been explored in depth due to the event relationship.
Solutions that cannot fallback after refreshing the angular lazy loading mechanism:
By looking at the source code of angular (ionic), it is found that there is an onUrlChange method on the $browser service. When we change the URL address from outside angular, the event handling function registered in this method will be called, as shown in the figure below:
In this way, you can register a function in the program entrance
//When the state is reloaded through the browser's fallback/forward button, the page is reloaded. If the system state is used, this method will not be entered. $browser.onUrlChange(function (url) { //TODO parses the state in the url, uses lazy loading to load the state module to achieve page refresh});Through this function, you can refresh the page again when you fall back and move forward...
The above is the quick solution that the Angular lazy loading mechanism cannot be rolled back after refreshing. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!