angularjs的resolve到底有什么作用啊?

Question

经常看到人家在resolve里面返回一个factory的数据。然后再controller里面注入。
为什么不直接在controller里面直接注入factory啊?

Answer 1

就是可以让控制器更加简洁一下,resolve

http://www.html-js.com/article/Front-end-source-code-analysis-original-uirouter-source-code-analysis

详细的可以看这个链接 ui-router 写的很好的

Answer 2

保证数据获取后再跳转路由，这样操作避免了跳转路由后数据还没有获取完成而可能带来的页面闪烁问题。体验也更好

Answer 3

我们来看一下johnPapa给的解释
https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/zh-CN.md#route-resolve-promises

当一个controller在激活之前，需要依赖一个promise的完成时，那么就在controller的逻辑执行之前在$routeProvider中解决这些依赖。如果你需要在controller被激活之前有条件地取消一个路由，那么就用route resolver。

当你决定在过渡到视图之前取消路由时，使用route resolve。

为什么？：controller在加载前可能需要一些数据，这些数据可能是从一个通过自定义factory或是$http的promise而来的。route resolve允许promise在controller的逻辑执行之前解决，因此它可能对从promise中来的数据做一些处理。

为什么？：这段代码将在路由后的controller的激活函数中执行，视图立即加载，promise resolve的时候将会开始进行数据绑定，可以（通过ng-view或ui-view）在视图的过渡之间加个loading状态的动画。

注意：这段代码将在路由之前通过一个promise来执行，拒绝了承诺就会取消路由，接受了就会等待路由跳转到新视图。如果你想更快地进入视图，并且无需验证是否可以进入视图，你可以考虑用控制器 activate 技术。

/* avoid */
angular
    .module('app')
    .controller('Avengers', Avengers);

function Avengers (movieService) {
    var vm = this;
    // unresolved
    vm.movies;
    // resolved asynchronously
    movieService.getMovies().then(function(response) {
        vm.movies = response.movies;
    });
}
/* better */

// route-config.js
angular
    .module('app')
    .config(config);

function config ($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'Avengers',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: function(movieService) {
                    return movieService.getMovies();
                }
            }
        });
}

// avengers.js
angular
    .module('app')
    .controller('Avengers', Avengers);

Avengers.$inject = ['moviesPrepService'];
function Avengers (moviesPrepService) {
    var vm = this;
    vm.movies = moviesPrepService.movies;
}