文档章节

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

Destroy001
 Destroy001
发布于 2015/12/09 13:41
字数 353
阅读 135
收藏 2
点赞 0
评论 0

我在使用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
日本
高级程序员
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro ⋅ 05/30 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Vue、React、Angular最佳UI框架

摘要: 今天我们不聊技术,只"以貌取人"。 前言 之前有很多刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩笑...

Fundebug ⋅ 05/03 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

Ionic 4.0.0-alpha.4 发布,新增 willChange 事件

Ionic 4.0.0-alpha.4 发布,Ionic Framework 是一个高级的 HTML5 移动端应用框架,也是一个开发混合移动应用的前端框架。 bug 修复: angular: ompare路由器参数长度 angular: Config provid...

雨田桑 ⋅ 05/01 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

JavaScript MVW 框架 - AngularJS

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

匿名 ⋅ 2011/01/20 ⋅ 44

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HiSDP —— 高效的C++软件开发平台

目前阿里集团每天有近1000PB的数据是通过LogAgent采集的,为了让LogAgent做到资源占用节省和高效采集,背后是基于HiSDP去构建的。 缘由 当决定采用C++编程语言去开发一个软件时,紧接着所面临...

阿里云云栖社区 ⋅ 13分钟前 ⋅ 0

zookeeper-3.4.12 下载与安装教程

一、zookeeper下载地址 http://mirrors.hust.edu.cn/apache/zookeeper/ 二、启动教程 把压缩包放在指定目录下 第三: 进入 conf文件夹底下 zoo_sample.cfg 文件名改成 zoo.cfg 第四步: 进入b...

泉天下 ⋅ 15分钟前 ⋅ 0

Oracle 中文日期转换

SELECT TO_date('2011年11月11日', 'yy"年"mm"月"dd"日"') FROM DUAL; 1. Oracle无法识别中文格式,所以添加双引号。 2. 后面的格式是指字符串在转换前的格式,而不是指转换后的格式。...

江戸川 ⋅ 16分钟前 ⋅ 0

MySell:API Spring Boot

起步 类目 商品 订单

BeanHo ⋅ 19分钟前 ⋅ 0

Spring方法拦截器MethodInterceptor

参考资料 1、Spring方法拦截器MethodInterceptor 2、Sharding JDBC源码分析-JdbcMethodInvocation类的作用

哎小艾 ⋅ 22分钟前 ⋅ 0

正则表达式

元字符 元字符,又叫字符集,就是用一些特殊符号表示特定种类的字符或位置。 匹配字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 匹配...

wangchen1999 ⋅ 22分钟前 ⋅ 0

数据库数据导入Elasticsearch案例分享

基于bboss持久层和bboss elasticsearch客户端实现数据库数据导入es案例分享(支持各种数据库和各种es版本) 1.案例对应的源码 https://gitee.com/bboss/bboss-elastic/blob/master/bboss-el...

bboss ⋅ 23分钟前 ⋅ 0

动手---sbt(2)

参考 https://blog.csdn.net/leishangwen/article/details/46225587 建立一个chisel_max目录,文件内容如后面所述,现在开始执行命令: joe@joe-Aspire-Z3730:/media/sdb4/download/scala$ c......

whoisliang ⋅ 29分钟前 ⋅ 0

纯js实现最简单的文件上传(后台使用MultipartFile)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr......

孟飞阳 ⋅ 34分钟前 ⋅ 0

iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码、FMDB、键盘动态高度、定位等 动画...

sunnyaigd ⋅ 35分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部