AngularJS - 利用ui-route及provider实现页面数据预加载的关键
AngularJS - 利用ui-route及provider实现页面数据预加载的关键
Destroy001 发表于2年前
AngularJS - 利用ui-route及provider实现页面数据预加载的关键
  • 发表于 2年前
  • 阅读 133
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

我在使用angular的时候经常碰到一个问题,希望在必要数据加载完成之前暂时不要显示页面。这时,我一般用ui-routeresolve功能并结合数据接口来实现。(数据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);
    }]);
});
共有 人打赏支持
粉丝 0
博文 14
码字总数 3909
×
Destroy001
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: