Share resolve in Angular UI Router

Question

I have various states that use the same resolve to load a timeLog into my controller $scope before the controller loads. I would like to not reproduce this code but share it between these views. I'm fairly new to JS frameworks, and especially Angular JS.

I'm having a hard time googling this and not finding any decent information. Maybe I'm searching incorrectly or not thinking about this correctly. Any Suggestions?

.config(function($stateProvider) {
$stateProvider
.state('tab.edit-log-summary', {
    url: '/logs/edit-log-summary/:timeLogId',
    views: {
      'tab-logs': {
        templateUrl: 'templates/logs/edit-log-summary.html',
        controller: 'EditLogSummaryCtrl'
      }
    },
    resolve: {
      timeLog: function(config, $stateParams, DailyLog) {
        return DailyLog.get({id: $stateParams.timeLogId});
      },
    }
  })

  .state('tab.edit-time-log', {
    url: '/logs/edit-time-log/:timeLogId',
    views: {
      'tab-logs': {
        templateUrl: 'templates/logs/edit-time-log.html',
        controller: 'EditTimeLogCtrl'
      }
    },
    resolve: {
      timeLog: function(config, $stateParams, DailyLog) {
        return DailyLog.get({id: $stateParams.timeLogId});
      },
    }
  })

})

Harris · Accepted Answer · 2015-12-29 15:21:37Z

1

This really goes down to vanilla Javascript. The resolves are objects. Just define them as a single object somewhere above and pass it to the resolve property each time.

.config(['$stateProvider',function($stateProvider) {
var timeLogResolve = {
      timeLog: ['config','$stateParams','DailyLog',function(config, $stateParams, DailyLog) {
        return DailyLog.get({id: $stateParams.timeLogId});
      }]
    };

$stateProvider
.state('tab.edit-log-summary', {
    url: '/logs/edit-log-summary/:timeLogId',
    views: {
      'tab-logs': {
        templateUrl: 'templates/logs/edit-log-summary.html',
        controller: 'EditLogSummaryCtrl'
      }
    },
    resolve: timeLogResolve,
    }
  })

  .state('tab.edit-time-log', {
    url: '/logs/edit-time-log/:timeLogId',
    views: {
      'tab-logs': {
        templateUrl: 'templates/logs/edit-time-log.html',
        controller: 'EditTimeLogCtrl'
      }
    },
    resolve: timeLogResolve,
    }
  })

}])

One suggestion- use inline array notation for providing dependencies. This helps protect your code from breaking if you minify it. I did that myself in the demo above, but I leave it to your discretion to keep it.

edited Dec 29, 2015 at 15:21

answered Dec 29, 2015 at 14:58

Harris

1,78516 silver badges19 bronze badges

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

1 Comment

awwester Over a year ago

thank you! I knew it would be something simple I was missing.

Collectives™ on Stack Overflow

Share resolve in Angular UI Router

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