Menu
I need to detect a page refresh event in my single page application.
254
What you can do is detect the page exit event and the app open event. $rootScope. $on('$routeChangeStart', function (event, next, current) { if (! current) { // handle session start event } });
From then on, the Angular framework kick in and loads the appropriate modules and pages as route changes. When you refresh the page you lose all the state of the application since you are reloading the index. html with all the required dependencies again.
'IsPostback' will always have the value which was set previously. So for instance if the page was posted back before refresh, then the value will be true and if the page is not posted back before refresh, then the value will be false.
There is a library ng-device-detector which makes detecting entities like browser, os easy. Inject "ng. deviceDetector" as dependency in your module. Then inject "deviceDetector" service provided by the library into your controller or factory where ever you want the data.
An Angular application is a single page application, and in the context of a single page application the full app is loaded once, and data or screens are refreshed as the user uses your application. A browser refresh is the equivalent of shutting down your application and launching it again.
One is to use window.reload to reload entire page, and the other is to use onSameUrlNavigation-reload refresh component with an angle router. Some times, As a developer, you need to write a logic to reload a component or a page for a below cases In Angular, page navigation can be done with or without angular router module
There are many other ways of detecting a page load event in Angular. The constructor of your AppModule. A service injected into the root that is used at least once. There is also the main.ts file which bootstraps the Angular application. Basically, anywhere there is JavaScript that runs once...
As window is an global object which can be reused directly in Angular components. window.location.reload () loads current page reloadCurrentPage () { window.location.reload (); } Moving from one page to another in a legacy web application reloads the page and its content.
You can't for sure, because a browser page refresh is equivalent to exiting the app then opening it again.
What you can do is detect the page exit event and the app open event.
In the app.run() block inject 'window' dependency and add:
window.onbeforeunload = function () {
// handle the exit event
};
and on $routeChangeStart event
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
// handle session start event
}
});
And if definitely you need to link these two events it has to be on the backend/server side ....
I hope this helps.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
