ui-router 使用resolve进行数据预加载

使用的angular 1.6,使用ui-router进行路由的配置。碰到需要在页面跳转前的进行数据预加载的需求。

ui-router的路由配置当中有一项 resolve 的选项，可以在当中进行数据的预加载，当数据加载完成之后才会跳转至目标页，目标页控制器可以直接拿到预加载的数据进行使用。

路由配置代码如下：

$stateProvider.state("editpublish", {    url: "/editpublish/:publishid",    templateUrl: "editpublisher.html",    controller: "editPublishCtrl",    resolve: {        publishInfoData: function($stateParams, joinPublishListSrv) {            var promise = joinPublishListSrv.getPublishById($stateParams.publishid);            promise.then(function(success) {                return success.data;            });            return promise;        }    }});

服务请求后台数据的代码：

this.getPublishById = function(id) {        var promise = $http({            method: "GET",            url: "getPublisherById.action",            params: {                id : id            }        });        return promise;    };

1：publisherInfoData : 后面方法中的返回数据会赋给这个对象，并且注入到在目标页的controller当中。

2：joinPublishListSrv : 自定义的服务，用于向后台请求获取数据。

3：joinPublishListSrv.getPublishById($stateParams.publishid) : 方法代码上面已经给出，这是一个异步的操作，返回的是一个promise对象。路由会等到promise对象状态改变之后再进行跳转，也就是promise.then()中的方法执行之后再跳转，自然数据也就在跳转前获取到了。

4：注意：需要在路由配置的地方指定控制器。例如： controller: “editPublishCtrl”； 目标页面不要再使用ng-controller指令指定控制器，否则会发生unknow provider的错误。

目标页面控制器获取数据的代码如下：

joinPublishListModule.controller("editPublishCtrl", ["$scope",  "publishInfoData", function($scope,  publishInfoData) {     console.log(publishInfoData);}]);