CODEWITHSUNDEEP
javascriptangularjs
NimmoNet
NimmoNet

Reputation: 994

Should i use $rootScope to store http requests that only need to be made once

I am using AngularJs for a new application. I feel I have solved a problem but i'm not sure i have done it in the best way possible so would like to check before gunning ahead.

Let's for examples sake say i have the two controllers AccountsCtrl and ContactsCtrl, every time each is called a request to a REST server for all the accounts or contacts is made for each controller respectively. When within the controller any data changes are kept in sync in the angular models (and the server backend) to reflect this and hence the UI. Every time the user switches between each controller they have to make call to the server to fetch the data which it already had (which was up to date) last time it was loaded.

Currently this causes a very small lag. I would like to make it persistant i.e. not loaded each time the controller is loaded to save on the lag and the server requests. I have tried saving the data into the $rootScope and this works great but i'm not sure it's the right thing to do?

The question is how best solve this problem? Is the $rootScope the best way to tackle this?

Upvotes: 1

Views: 246

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364697

I would store the data and code that interacts with the web server in one or two Angular services. Each time a controller is created (e.g., when you go back to the page a second time), the (appropriate) service should decide whether to return the cached data or make an Ajax request to your REST server.

Your service(s) would be injected into your controllers.

See also https://stackoverflow.com/a/12009408/215945 and https://groups.google.com/d/topic/angular/eegk_lB6kVs/discussion

Upvotes: 2

asgoth
asgoth

Reputation: 35829

First of all, you should do your REST call via a service:

app.factory('RestService', ['$http', function($http) {
   return {
     getSomething: function(url) {
        var result = {};

        $http.jsonp(url).success(function(data) {
           result.list = data;
        });
        return result;
     }
   };
   ...
}];

You don't need $rootScope. Just define a parent controller which scopes both controllers, e.g. RootController, and store the data there. This is because child scopes (e.g. from AccountsCtrl) inherit what is defined in parent scopes.

<div ng-controller="RootController">
    <div ng-controller="AccountsCtrl">
    </div>
    <div ng-controller="ContactsCtrl">
    </div>
</div>

In practice this is almost the same as using $rootScope, but you don't need to inject it and you keep your controller logic similar as other controllers.

Upvotes: 0

Related Questions