文档章节

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

Destroy001
 Destroy001
发布于 2015/12/09 13:41
字数 353
阅读 151
收藏 2

我在使用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);
    }]);
});

© 著作权归作者所有

共有 人打赏支持
Destroy001
粉丝 0
博文 14
码字总数 3909
作品 0
日本
高级程序员
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
第220天:Angular---路由

内容介绍,为什么要使用前端路由? 在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之...

半指温柔乐
05/05
0
0
整合jQuery Mobile+AngularJs 经验谈

两者都是不错的JS编程框架,但是各自用途不同 1. jQuery Mobile提供了不错的图形空间,以及依赖于jQuery本身,提供了不少空间操作的API 2. Angular没有啥控件,但是是一个很好的JS的MVC框架,...

工程师楚门
2014/03/12
0
19
AngularJS ui-router (嵌套路由)

介绍 AngularJS 嵌套路由:这是我针对同一个主题(ui-router)的第二篇文章. 如果你对第一篇文章感兴趣的话,可以访问 这里. 好了,让我们继续吧,来看看嵌套的ui-router状态是怎么回事. ui-...

oschina
2014/11/17
93K
19

没有更多内容

加载失败,请刷新页面

加载更多

大数据学习有哪几个步骤

目前大数据行业异常火爆,不少人都对大数据充满了兴趣,其中有大部分人都从没接触过大数据,对于应该如何学习大数据一头雾水。大数据学习并不是高深莫测的,虽然它并没有多简单,但是通过努力...

董黎明
16分钟前
4
0
shell习题_3

1:监控httpd的进程;每隔10s检测一次服务器的httpd的进程数,如果大于500则自动重启httpd服务;并检测是否启动成功; 如果没有正常启动还需要再启动一次,最大不成功数超过五次立即发邮件给管理...

芬野de博客
16分钟前
1
0
Android 9.0 优势探讨

我们来谈论一下 Android。尽管 Android 只是一款内核经过修改的 Linux,但经过多年的发展,Android 开发者们(或许包括正在阅读这篇文章的你)已经为这个平台的演变做出了很多值得称道的贡献...

问题终结者
33分钟前
4
0
vue 组件使用中的一些细节点

细节一 基础例子 运行结果: 以上大家都懂,这边就不多说,回到代码里,有时候我们需要 tbody 里面每一行是一个子组件,那我们代码可以怎么写呢?我们可以这样写,定义一个全局组件,如下: ...

peakedness丶
40分钟前
2
0
vue 之 css module的使用方法

动手之前先配置项目,网上很多文章说需要下载css-loader插件,Vue中的vue-loader已经集成了 CSS Modules,因此删掉也能正常运行 在vue.config.js中添加如下配置 `css: {``loaderOptions: ...

前端小攻略
44分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部