handle browser refresh event with angular 1.5 component routing

Question

I have implemented Angular 1.5 component routing . I am looking for solution when a user refresh browser by click or by keyboard F5 . It should redirect user to first page and should reset all entered/selected data.

Here is PLUNKER . This have only two pages.

In my case, if user do refresh. User should be redirected to First page and all entered/selected data will be reset to default.

Note: I am aware about Angular 1.5 component routing deprecation. Sad, that I got to know about this only after my app went to production. I have to provide some solution to user Until we migrate to Angular2.

Here is code, which handles component routing:

var module = angular.module('app', ['ngComponentRouter']);

module.config(function($locationProvider) {
  $locationProvider.html5Mode(true);
});

module.value('$routerRootComponent', 'myFirstApp');

module.component('myFirstApp', {
  templateUrl: "mainview.html",
  $routeConfig: [{
    path: '/',
    redirectTo: ['/First']
  }, {
    path: '/first',
    name: 'First',
    component: 'firstComponent'
  }, {
    path: '/second',
    name: 'Second',
    component: 'secondComponent'
  }]
})

Answer 1

I was able to do it, only thing is one need to handle routing programmatically. This line is doing the magic window.onbeforeunload = $rootRouter.navigate(['First']);

Make sure to inject $rootRouter & $window service.

module.component('firstComponent', {
templateUrl: "1.html",
controllerAs: "vm",
controller: function($rootScope, sharedService, $rootRouter, $window) {

  window.onbeforeunload = $rootRouter.navigate(['First']);

}