Angular UI路由器中的共享解决方案

Question

我有不同的状态，使用相同的决心在控制器加载之前将timeLog加载到我的控制器$ scope中。我不想重现这段代码，而是在这些观点之间分享它。我对JS框架相当陌生，特别是Angular JS。

我很难搜索这个，并没有找到任何体面的信息。也许我在错误地搜索或者没有正确地思考这个问题。有什么建议么？

.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}); 
     }, 
    } 
    }) 

}) 

Answer 1

这真的归结为香草的Javascript。决议是对象。只需将它们定义为上面的某个单个对象，并将其每次传递给resolve属性即可。

.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, 
    } 
    }) 

}]) 

一个建议 - 使用inline array notation提供依赖关系。这有助于保护您的代码免受破坏，如果你缩小它。我在上面的演示中自己做了这个，但是我谨慎行事来保留它。