Run a function only the first time when AngularJS gets loaded

Question

I'm using angular-seed template (AngularJS) and I have routeProvider setup and such, now I want to execute a function (which resides in a factory), but only the very first time when the page gets loaded. I found many solutions for this, but I don't want to execute the code each time the users switches between tabs (via routeProvider of course, page doesn't get reloaded) - the code must be executed only when the whole page gets (re)loaded.

How should I approach this? I tried to call the function from run and then broadcast the event when page gets loaded, but there are no event listeners - I guess that is because the run part gets executed before the controllers are setup, so there are no listeners attached at the time when the event gets broadcast.

So, any suggestions how to approach this?

UPDATE

Use case:

when user types the url in the page, the page gets loaded
when pages gets loaded, a $http.get request is performed, which gets a random content
this content can be changed only by clicking a button, to explicitly request a change of content.
if users clicks to a different page e.g. view2 (routeProvider) and then back to the view1, the content must not change
when users refreshes the page (F5), the content changes again (or as already stated, by a click of a button)

Refer this

Nitesh Goyal
– Nitesh Goyal

2016-05-27 12:06:37 +00:00
Commented May 27, 2016 at 12:06 — Nitesh Goyal
– Nitesh Goyal, Commented May 27, 2016 at 12:06

T J · Accepted Answer · 2016-05-27 12:20:28Z

3

Use the run method:

app.run(function(yourService){
  yourService.cacheRandomContent();
});

It runs only once after the app is bootstrapped and services are created.

To access the data in controller, just inject the same service:

app.controller('someCtrl',function($scope, yourService){
  yourService.getCachedRandomContent().then(function(resp){
    $scope.data = resp.data;
  });
});

Your service would be something like:

app.service('yourService',function($http){
  var promise;
  return {
   cacheRandomContent: function(){
     promise = $http.get();
   },
   getCachedRandomContent : function(){
       return promise;
   }
  }
});

edited May 27, 2016 at 12:20

answered May 27, 2016 at 12:02

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

8 Comments

uglycode Over a year ago

I tried that, but how do I send the data from factory to a controller where I actually display the initial data?

T J Over a year ago

@uglycode Can't you inject this service in the controller and access the data? This does exactly what you asked. Maybe you want to provide more details.

uglycode Over a year ago

I've provided a use case for what I'd like, refresh my initial question

T J Over a year ago

@uglycode can you check the update in answer and explain why you can't do that?

uglycode Over a year ago

OK I'll try to implement this, but in the meanwhile, what if yourService.someMethod(); in the app.run takes like, a long time, and controller gets initialized before? Then the getData inside the controller would return null, wouldn't it?

|

Collectives™ on Stack Overflow

Run a function only the first time when AngularJS gets loaded

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related