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);
}]);