Browser's back button doesn't work without refresh in Angular app

Question

I have an Angular app, which has several ng-controllers and several templates. And here is a snippet of my routing:

when('/claims', {
    templateUrl: '/angular_templates/index',
    controller: 'ClaimsController',
    resolve: {
        rootClaims: ['claimsCache', function (claimsCache) {
            return claimsCache.getResource(0);
        }]
    }
}).when('/claims/:id', {
    templateUrl: '/angular_templates/show',
    controller: 'ClaimController',

    resolve: {
        claim: ['$http', '$route', function ($http, $route) {
            return $http.get('/claims/' + $route.current.params.id + '.json').then(
                function (response) {
                    return response.data;
                },
                function (response) {
                    console.log(response.status);
                    return {};
                }
            );
        }]
    }
}).when('/tags/:id/claims_with_tag', {
    templateUrl: '/angular_templates/tag_claim.html',
    controller: 'TagController',
    resolve: {
        tag: ['$http', function ($http) {
            return $http.get('claims_with_tag.json').then(
                function (response) {
                    return response.data;
                },
                function (response) {
                    console.log(response.status);
                    return {};
                }
            );
        }]
    }
});

When I open several pages one by one by manually entering the URL and pressing Enter, and then press browser's back button - everything works well. But when I navigate from one page to another by clicking some links on the pages and then use the Back button, I can see in console that all the data is loaded, queries are sent to the server, but no ng-content actually displays on the page. After page refresh all loads fine.

I have noticed one more peculiarity - the back navigation doesn't work for that page only which was opened first. For example, I manually enter the address of the page1, then go to page2, page3, and then click the Back button in browser - all works until we reach the very first page (page1 in this sample). When getting to page1, I can see the data coming from the server in the console, but it doesn't display on the page.

Does anyone know a solution for this issue?

Add a plnkr or jsfiddle with your code to explain the problem. What is `ng-content`? — Michał Miszczyszyn, Aug 13 '14 at 21:34
ng-content - It is not a directive, I just called the dynamic content like this which is loaded by Angular. FOr example, if I have a static header it gets loaded when clicking Back, but everything that belongs to Angular template - doesn't load. — Sergey, Aug 15 '14 at 13:52
As a temporary solution I wrote a check for template loading. And if template is not rendered, I do full page reload. But I'd like to find a better solution. — Sergey, Sep 10 '14 at 10:57

score 0 · Answer 1 · answered Aug 13 '14 at 17:00

0

When you navigate from one page to an other the listeners are gone..

It's seems that you need to reattach the button listener after you navigate to any page...

answered Aug 13 '14 at 17:00

Ofir Hadad

1,800
3
26
47

score 0 · Answer 2 · edited Sep 30 '19 at 05:58

0

You need to subscribe to Param of ActivatedRoute and handle the flow accordingly in each component like this:

this.route.params.subscribe((params: Params)=>{
});

edited Sep 30 '19 at 05:58

Saeed

3,294
5
35
52

answered Sep 30 '19 at 04:10

Senthurai

1
3

1

This question is of [angularjs] (v1.x), not [angular] (v2+). So this answer shouldn't be here. – 31piy Sep 30 '19 at 06:01

Browser's back button doesn't work without refresh in Angular app

2 Answers2