How to reload the same page on browser refresh in angularjs

Question

How to reload the same page on browser refresh in angularjs

508 views Asked by Araf At 01 March 2020 at 06:42

I've a nav bar and when I click any tab in the nav bar, it takes me to that tab.

<section id="tabs">
    <div class="mob-nav"> 
        <div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist"> 
            <!-- N add new class nav-tabs-scroll -->
            <a class="nav-item nav-link" style="padding-top: 10px;"
               ng-class="{ active: $index == 0 }"
               id="nav-{{menuTab.menuURL}}-tab"
               data-toggle="{{menuTab.dataToggle}}"
               data-target="#{{menuTab.menuURL}}"
               href="#{{menuTab.menuURL}}" role="tab"
               aria-controls="nav-{{menuTab.menuURL}}"
               ng-repeat="menuTab in menuList">
            </a>
        </div>
    </div>
</section>

<!-- Tab Details -->
<section id="tabs">
    <div class="">
        <div class="">
            <div class="mb-d-150">
                <div class="tab-content py-3 px-sm-0 pl-0 pr-0"
                     id="nav-tabContent"> 
                    <!-- N removed py-3 class -->
                    <div class="tab-pane fade show"
                         ng-class="{ active: $index == 0 }"
                         id="{{menuTab.menuURL}}" role="tabpanel"
                         data-target="#{{menuTab.menuURL}}"
                         aria-labelledby="nav-{{menuTab.menuURL}}-tab"
                         ng-include="menuTab.colDef"
                         ng-repeat="menuTab in menuList">
                    </div>
                    <div class="tab-pane fade" id="changepass" role="tabpanel"
                         aria-labelledby="nav-about-tab"
                         ng-include="changePasswordTemplate">
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>

Here's an example of menuList.

[{
    menuID: "USER LANDING PAGE"
    caption: "Dashboard"
    parent: "root"
    menuURL: "exampleModal"
    cssClass: "fas fa-cog fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "customerLandingPageTemplate"
    SlNum: 98
    colDef: "/js/templates/user-landing-page.html"
    menuList: []
    dataToggle: "modal"
},{
    menuID: "USER QUERIES"
    caption: "USER QUERIES"
    parent: "root"
    menuURL: "user-queries"
    cssClass: "fas fa-comment-alt fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "userQueriesTemplate"
    SlNum: 100
    colDef: "/js/templates/user-queries.html"
    menuList: []
    dataToggle: "tab"
}]

Here's the angularjs part which gives me the menuList:

GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
    $scope.menuList = data;
    console.log($scope.menuList)
});

When I refresh browser, it always takes me back to the USER LANDING PAGE no matter where I refresh. But on browser refresh, I need to reload the page where I was before refreshing.

Original Q&A

There are 1 answers

**eustatos** · Answer 1 · 2020-03-01T13:15:56+00:00

You could use the session storage for saving the last state. Internal code snippet does not allow to use session storage. A working example on JSBin.

angular.module('app', ['ui.router'])
  .config(($stateProvider) => {
    const helloState = {
      name: 'hello',
      url: '/hello',
      template: '<h3>hello world!</h3>'
    }

    const aboutState = {
      name: 'about',
      url: '/about',
      template: '<h3>Its the UI-Router hello world app!</h3>'
    }

    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);
  })
  .run(($state, $transitions) => {
    $transitions.onSuccess({}, transition => {
      sessionStorage.setItem('lastState', transition.to().name);
    });
    const lastState = sessionStorage.getItem('lastState');
    if (lastState) {
      $state.go(lastState);
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>

<body ng-app="app">

  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</body>

TechQA.

How to reload the same page on browser refresh in angularjs

There are 1 answers

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in BROWSER

Related Questions in BROWSER-REFRESH

Popular Questions

Popular Tags

Trending Questions