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