AngularJS - 利用ui-route及provider实现页面数据预加载的关键

我在使用angular的时候常常碰到一个问题，但愿在必要数据加载完成以前暂时不要显示页面。这时，我通常用ui-route的resolve功能并结合数据接口来实现。（数据api我是通常用provider来封装）

首先，在config中注入testProvider，并不是必须，只是演示下如何配置provider。这里有个区别就是，在config中不能直接访问provider的$get中的方法，可是能够访问provider对象的属性与方法。(好比下面代码中的this.setPrefix方法)

其次，而后回到个人需求部分，在ui-route里面获取须要预先加载的数据。这个跟controller中的注入没有区别，如例子只要在resolve.userInfo的方法参数上添加本身须要的provider名称，这里就是test，这样咱们就能够直接调用test.current了。resolve也是一个关键，咱们用它来获取数据并注入到controller中。

最后，在controller里面注入咱们须要使用的数据，userInfo

angular.module('logging', [])
    .provider("test", function() {
        var prefix;
        this.setPrefix = function(p) {
            prefix = p;
        }

        this.$get = function() {
            return {
                log: function(msg) {
                    console.log(prefix,msg);
                },
                current:function(){
                	return {"name":"JMZ"};
                }
            }
        }
    })

angular.module('myApp', ['logging']).config(["$stateProvider", "testProvider" function ($stateProvider, testProvider) {
    testProvider.setPrefix("works: ");

    $stateProvider.state("home/index", {
        url: "/",
        "templateUrl": "home/index.tpl.html",
        "controller": "home/index.ctrl"
        resolve: {
            userInfo: function ($q,test) {
                return test.current();
            }
        }
    });

}]).controller("myCtrl", ["$scope","test","userInfo",function($scope, test,userInfo) {
    test.log(userInfo);    
    $scope.$watch('myModel', function(newval) {
        test.log(newval);
    }]);
});