AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

时间:2021-11-19 20:44:53

AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

前言

在“AngularJS项目开发技巧之图片预加载”一文中,自己曾经天真的认为提升服务端带宽就可以解决图片加载问题。但自己的想法错了,通过阅读破狼的书《AngularJS深度剖析与最佳实践》,隐隐察觉到是自己的项目架构出现了问题。存在很多待优化的地方。其书中这样写到“如果在实例化控制器之前,需要准备一些特定数据,或者有条件的阻止进入路由,那么可以在$routeProvider中配置Resolve属性来解决。”

注:预载入Resolve

使用预载入功能,开发者可以预先载入一系列依赖或者数据,然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证(promises)。在使用这个选项时比使用angular-route有更大的*度。

预载入选项需要一个对象,这个对象的key即要注入到控制器的依赖,这个对象的value为需要被载入的factory服务。

如果传入的是字符串,angular-route会试图匹配已经注册的服务。如果传入的是函数,该函数将会被注入,并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证(promise),这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

思路

将图片下载耗时操作做异步处理。图片下载代码如下:

try {
var data = {};
appCallServer($http, "9101", data,
//success function
function(data) {
console.log("9101:" + JSON.stringify(data.data));
var adpic = new Array;
for (var i = 0; i < data.data.length; i++) {
adpic[i] = data.data[i].url;
}
$scope.adpic = adpic;
return true;
},
// fail function
function(data) {
$ionicLoading.show({
template: "查询广告失败,请检查您的网络连接"
});
$timeout(function() {
$ionicLoading.hide();
}, 1200);
return false;
});
} catch (error) {
$scope.showAlert1("call:" + error.message);
return false;
}

整理后的代码如下:

路由:

.state('tab.find_med', {
url: "/find_med",
views: {
'tab-find_med': {
templateUrl: "find_medicine.html",
controller: 'find_med_contrller',
resolve:{
adpic:function(){
var data = {};
appCallServer($http, "9101", data,
//success function
function(data) {
console.log("9101_resolve:" + JSON.stringify(data.data));
var adpic = new Array;
for (var i = 0; i < data.data.length; i++) {
adpic[i] = data.data[i].url;
}
return adpic;
},
// fail function
function(data) {
$ionicLoading.show({
template: "查询广告失败,请检查您的网络连接"
});
$timeout(function() {
$ionicLoading.hide();
}, 1200);
return false;
});
}
}
}
}
})

控制器:

$scope.getadpic = function() {
$scope.adpic = adpic;
};
$scope.getadpic();

执行程序,查看效果,提示如下错误:

AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

unpr全称是Unknown Provider,也就是说没有找到注入的东西。

找了半天忽然醒悟了,resolve中的对象只有在相应的控制器中才可以获取到,而自己之前是在别的控制器中添加的resolve对象,难怪总是报服务未注入的错误呢。正确的代码如下:

路由:

$stateProvider
.state('tab', {
url: "/tab",
templateUrl: "tabs.html",
controller: 'tabsCtrl',
resolve:{
adpic:function(){
return "www";
}
}
})

控制器:

myCtrl.controller('tabsCtrl', function($scope, $rootScope, $http, $location,... $timeout, adpic) {

...

$scope.getadpic = function() {

console.log("adpic.........." + adpic);

};

$scope.getadpic();

}

所以一定要掌握原理。不要茫然。

添加以上代码后,HBuilder报如下错误:

AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

通过参考网络文献,优化后的代码如下:

// 利用Factory单例特性创建服务
myModule.factory('myAdpicService',function($http, $q){

return {
getAdpic: function() {
var d = $q.defer();
var data = {};
appCallServer($http, "9101", data,
//success function
function(data) {
console.log("9101_resolve:" + JSON.stringify(data.data));
var adpic = new Array;
for (var i = 0; i < data.data.length; i++) {
adpic[i] = data.data[i].url;
}
console.log("adpic___________:" + adpic);
d.resolve(adpic);
},
// fail function
function(data) {
$ionicLoading.show({
template: "查询广告失败,请检查您的网络连接"
});
$timeout(function() {
$ionicLoading.hide();
}, 1200);
d.reject(data);
});
return d.promise;
}
}
});<span style="color: rgb(62, 75, 83); font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
<span style="color:#ff0000;">$stateProvider
.state('tab', {
url: "/tab",
templateUrl: "tabs.html",
controller: 'tabsCtrl',
resolve:{
adpicSunny:function(myAdpicService) {
       return myAdpicService.getAdpic();
}
    }
}</span>

控制器中的代码不做任何变化。

代码回顾

以上代码通过定义一个独立的service的方式来使用resolve key,并且使用service来相应返回所需的数据(这种方式更容易测试)。并且对于较耗时的图片加载操作做异步处理。这与Android中的设计思想一致。至此,图片预加载问题成功解决。

有图有真相

AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

参考文献

1.http://www.bkjia.com/Javascript/1043828.html

2.http://www.bubuko.com/infodetail-828239.html

3.http://my.oschina.net/tanweijie/blog/295255

美文美图

AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)的更多相关文章

  1. AngularJS进阶&lpar;三十九&rpar;基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  2. Java进阶&lpar;二十六&rpar;公司项目开发知识点回顾

    公司项目开发知识点回顾 前言 "拿来主义"在某些时候并不是最佳选择,尤其是当自己遇到问题的时候,毫无头绪. 在一次实验过程中,需要实现数据库的CRUD操作.由于之前项目开发过程中, ...

  3. AngularJS进阶&lpar;三十&rpar;AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  4. Java进阶&lpar;三十六&rpar;深入理解Java的接口和抽象类

    Java进阶(三十六)深入理解Java的接口和抽象类 前言 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太 ...

  5. AngularJS进阶&lpar;二十九&rpar;AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  6. AngularJS进阶&lpar;三十八&rpar;上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  7. AngularJS进阶&lpar;二十六&rpar;实现分页操作

    JS实现分页操作 前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果.在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果.受前面"JS实现时间选择插件 ...

  8. 网站开发进阶&lpar;三十八&rpar;Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  9. AngularJS进阶&lpar;三十五&rpar;浏览器兼容性解决之道

    浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...

随机推荐

  1. Linux 共享内存详解一

    共享内存段被多个进程附加的时候,如果不是所有进程都已经调用shmdt,那么删除该共享内存段时,会出现一个临时的不完整的共享内存段(key值是0),无法彻底删除.只有当所有进程都调用shmdt,这个临时 ...

  2. HtmlAgilityPack 学习和笔记

    介绍: http://www.cnblogs.com/bomo/archive/2013/01/28/2879361.html 实战 c#获取外网ip 网址:http://ip138.com/ 如图: ...

  3. linux ----虚拟机无法与本地机通信

    1.以前能正常通信,电脑重启或休眠唤醒后, 虚拟机centos无法与本地主机通信,但能ping通同一局域网的其他主机,也能与外网通信 故障原因: 未找到 解决办法: 1.重启电脑 2.重启xshell ...

  4. CI 模板解析器类

    模板解析器类可以解析你的视图文件中的伪变量.它可以解析简单的变量或者以变量作为标签的结构.如果你以前没有用过模板引擎,那么伪变量如下所示: <html><head><ti ...

  5. SQL 课程 连接查询

    今天,我主要是对前面所学习过的子查询进行了复习,然后学习了连接查询join on 的内容. 如: select renyuan.code,name,age ,sex , bumen.bname,bce ...

  6. Struts2 知识体系

    1.struts2是什么 struts2是用于企业级Web开发的框架,基于struts2开发Web应用程序,在开发效率.可扩展性.可维护性上都会大有提升. 2.struts2的优点 struts2框架 ...

  7. NOI前的考试日志

    4.14 网络流专项测试 先看T1,不会,看T2,仙人掌???wtf??弃疗.看T3,貌似最可做了,然后开始刚,刚了30min无果,打了50分暴力,然后接着去看T1,把序列差分了一下,推了会式子,发现 ...

  8. Elixir东游记&sol;上:intro&sol;1

    1. 为啥前面还在搞haxe,现在又换到elixir了? erlang本来我就在用,用elixir不过是方便顺手给人科普而已. 2. so,接下来你打算用elixir干嘛? 很简单,写一个简单的解释器 ...

  9. GOPATH

    环境变量 GOPATH 的值可以是一个目录的路径,也可以包含多个目录路径,每个目录都代表 Go 语言的一个工作区(workspace).这些工作区用于放置 Go 语言的源码文件(source file ...

  10. 个人作业Week2-代码复审(修改明确了要求)

    代码复审 零,说在前面的话 大家完成了个人项目之后,都写了很多代码. 这些代码可能: 大括号换行/不换行 使用tab缩进/使用空格缩进 变量名函数名的定义很好/不好 每个函数都有详细的注释解释函数的功 ...