Using resolve functions once in angular js and angular router to few controllers

Question

Ui router looks like:

<div ui-view="test1">
<div ui-view="test2">

My routing:

 .state('testsPage', {
                  url: "/",
                  // templateUrl: "public/src/settings/settings.php",
          views: {
             'test1': {
                       templateUrl: 'public/src/test2.html',
                       controller: 'test2Controller',
                       controllerAs: 'vm',
                       resolve: {
                            getData: function(testService) {
                              return testService.getdata();
                            }
                       }
                     },
                     'test2': {
                       templateUrl: 'public/src/test1.html',
                       controller: 'test1ontroller',
                       controllerAs: 'vm',
                       resolve: {
                           getData: function(testService) {
                               return testService.getdata();
                           }
                       }
                     },

I want to call getData only once and not inject it the each controller If I do that in each controller it means that I call to getData from server two times in loading.

I tried to use controller inheritance but it ask to inject that service

    // Inherit from Base Controller
    angular.extend(vm, $controller('baseController', {
        getData: getData,
        testService: testService,
        $rootScope: $rootScope
    }));

How can I make it like inheritance? Do I need to move it to run the function? If yes do I have to use rootScope to get that data in the controller?

One method would be to make the states parent->child, as child states inherit the resolves of parents. — rrd
– rrd, Commented Jan 24, 2018 at 13:23
wouldn't it be much simpler to delegate the responsibility of caching results to the service? That way the first time the method is called, the service would contact the remote endpoint to actually get the data, but the second time it would just return the value its already got the first time. — SPArcheon - on strike
– SPArcheon - on strike, Commented Jan 24, 2018 at 14:14

AnthW · Accepted Answer · 2018-01-24 21:39:03Z

1

Try putting the resolve on the parent:

.state('testsPage', {
  url: '/',
  views: ...,
  resolve: {
    getData: function(testService) {
      return testService.getdata();
    }
  }
  ...
}

You would then need to add getData as a dependancy on each views controller:

// Controller
function test1ontroller(getData) {

}

answered Jan 24, 2018 at 21:39

AnthW

5435 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Using resolve functions once in angular js and angular router to few controllers

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related