文档章节

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

Destroy001
 Destroy001
发布于 2015/12/09 13:41
字数 353
阅读 139
收藏 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
日本
高级程序员
整合jQuery Mobile+AngularJs 经验谈

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

工程师楚门
2014/03/12
0
19
第220天:Angular---路由

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

半指温柔乐
05/05
0
0
实践总结 - 不可错过的Angular应用技巧

angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeoman 在刚开始接触或者使用...

顽Shi
2014/07/21
0
22
理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。 序 个人了解到AngularJS,是由于...

maweitao
2014/08/27
0
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java GC机制详解

垃圾收集 Garbage Collection 通常被称为“GC”,本文详细讲述Java垃圾回收机制。 导读: 1、什么是GC 2、GC常用算法 3、垃圾收集器 4、finalize()方法详解 5、总结--根据GC原理来优化代码 ...

小刀爱编程
16分钟前
1
0
ORACEL学习--理解over()函数

二、理解over()函数 1.1、两个order by的执行时机 分析函数是在整个sql查询结束后(sql语句中的order by的执行比较特殊)再进行的操作, 也就是说sql语句中的order by也会影响分析函数的执行结果...

spinachgit
18分钟前
1
0
抽象语法树

import asttree = ast.parse('def hello_word(): print("hello world!")')def hell_word(): print(1)print(ast.dump(tree)) 语法树 可以基于这个实现另外一种编程语言...

colin_86
19分钟前
1
0
Akka查询设备组《fourteen》译

加入以下依赖到项目中: 介绍: 到目前为止,我们看到的会话模式很简单,因为它们要求Actor保持很少或没有状态。 特别: 设备actor返回一个读数,不需要更改状态。 记录温度,更新单个字段。...

woshixin
26分钟前
1
0
wait、notify、notifyAll 的用法

wait()、notify()、notifyAll()是三个定义在Object类里的方法,用来控制线程的状态。这三个方法最终调用的都是jvm的native方法, 随着jvm运行平台的不同可能有些许差异。 wait(): 使持有该对...

noob_fly
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部