Handling Page Refresh with AngularJS Service and Views

Question

I have a simple SPA with two views: a list view and a detail view. I use a service called StateService to pass data between the two controllers.

I am trying to handle the case where the user refreshes the browser page--when this happens, the StateService gets reinitialized and the detail view can no longer work. I want to detect when this happens and return the user to the list view.

Here is a simplified version of my State Service. The idea is that I would set isInitialized to true when I switch to the detail view so that I can detect when the service has not been properly initialized.

var StateService = function () {
    var isInitialized = false;
};

This is what I have tried in the first few lines of my controller. The StateService is being successfully injected into the controller.

//always returns [Object], on refresh or navigating from list page
alert(StateService); 
// this next line always returns undefined.  Should be false since I am initializing
// the value to false?
alert(StateService.isInitialized); 
//One of the many combinations I have tried . . .
if (!StateService.isInitialized | StateService.isInitialized == false) {
    $location.path('/');
}

I don't know if this is a gap in my understanding of javascript or angular, but any thoughts on how I can get the above code to work, or better ideas on what to do when a user refreshes the page?

Edit

Using console.log as recommended by nycynik I see the following:

c {} [StateService]
undefined [StateService.isInitialized]

So it seems that StateService itself is just an empty object when this code gets hit. I get the same results from my other controller (the one that handles the list view).

As noted in the comments, the service seems to otherwise work as expected.

I am bit confused with your StateService shouldn't it be created with the service or factory function of AngularJS to be truly a AngularJS Service. It seems that your StateService is not really an AngularJS-Service and therefore does not get initialized correctly... — DanEEStar
– DanEEStar, Commented Jul 24, 2013 at 13:07
The service itself is just a function, and gets tied to the module/app via app.service(). I am doing this, but I'm not showing that code here. The service is otherwise completely functional--it's just the problem described in the question that I'm struggling with. — Phil Sandler
– Phil Sandler, Commented Jul 24, 2013 at 13:17
can you tell by the URL where you are and populate the service accordingly on creation? — akonsu
– akonsu, Commented Jul 24, 2013 at 13:35
instead of alert, you can do console.log() that way you can view the details of the object. But from the code shown, it should work fine. The problem must be elsewhere. — nycynik
– nycynik, Commented Jul 24, 2013 at 13:39
I had no idea console.log did that. This is fantastic. Updating my question with the findings. — Phil Sandler
– Phil Sandler, Commented Jul 24, 2013 at 14:03

fess . · Accepted Answer · 2013-07-24 16:41:27Z

1

I think you have a problem with scoping. variables in javascript have function scope. isInitialized is scoped only to your StateService Function, so you can't get at it outside of your StateService Function.

not sure exactly how you're getting this thing into your controller, but maybe these help:

if you're using an angular's module.service() to use StateService as a constructor to inject a (new StateService) into your controller then you need to set isInitialized on the instance

var StateService = function () {
   this.isInitialized = false;
};

This way (new StateService).isInitialized === false

If you are just using module.factory() or something else that doesn't use new, then you need to put your isInitialized value somewhere else you can actually get at it.

var StateService = function () {
};
StateService.isInitialized = false

Hope that helps.

answered Jul 24, 2013 at 16:41

fess .

1,6491 gold badge16 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Sandler Over a year ago

Aha! Very simple misunderstanding about how javascript works. Thanks for your help.

Collectives™ on Stack Overflow

Handling Page Refresh with AngularJS Service and Views

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related