AngulerJS学习之按需动态加载文件
在此之前我们首先要先了解几个东西:
$q
简介:
$q:主要解决的是异步编程的问题,是指描述通过一个承诺行为与对象代表的异步执行的行动结果的交互,可能会也可能不会再任何时候完成。
我们通过一个小故事理解 $q 服务。
- 中午点外买,打电话要了份炒饭,要求送到公司并给了老板具体地址。这个过程就是 $q.defer;
- 饭菜不可能立即送到,因此这是一个延期响应的请求;
- 老板说尽快送到。也就是老板给了我一个承诺 promise;
- 我可以边工作边等待,说明这个请求是个异步执行的过程。
- 这样这个延期异步请求就算建立完成了。就是一个deferred。
- 饭菜送到我去接受,这个过程称为 deferred.resolve(data) 响应事件;
- 如果米饭卖完了老板会告诉我做不了了,也就是拒绝我的请求了,就是 deferred.reject(error);
- 老板可以再任何时候跟我说做不了,只要在他还没把饭送来之前都可以。
- 快到楼下了,通知我去取。这就是通知 deferred.notify(data) 这样整个异步回调过程就完成了。
- 第二天我们好多人都要订餐。所以我就可以发起 $q.all(req1,req2,req3.);
使用
我们在服务中这样定义,在请求开始之间建立deferred,然后return deferred.promise.在获取到数据的时候deferred.resolve(data)。同样我们在中间可以收到通知或者拒绝等。
var def = $q.defer(); def.resolve(data); return def.promise;
按需加载
首先我们要了解一下几点:
1、什么时机下加载:
在 ngRoute 和 uiRoute 中都提供了 resolve 属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置 resolve 属性等等)。可以参考我的上篇文章。
2、加载后的文件如何注册:
angular有个启动函数,叫做bootstrap。 根据angular的代码设计,你需要在启动之前定义所有的controller。就好似有个袋子,你在bootstrap之前想往里塞什么就塞什么。可是一旦bootstrap了,他就不再接受你任何往里塞的controller了。
解决这个问题,只有一个方法,就是利用主模块的provider主动注册controller。但是由于provider不能直接使用,所以我们把它存在主模块下面。通过存下来的方法,可以用来注册异步加载回来的页面组件。
通过上述我们知道了需要异步加载文件
实现
// controller define(["app"], function(app) { app.config(["$stateProvider", "$urlRouterProvider", "$controllerProvider", function($stateProvider, $urlRouterProvider, $controllerProvider) { // angular有个启动函数,叫做bootstrap; // 根据angular的代码设计,你需要在启动之前定义所有的controller; // 就好似有个袋子,你在bootstrap之前想往里塞什么就塞什么; // 可是一旦bootstrap了,他就不再接受你任何往里塞的controller了; // 解决这个问题,只有一个方法,就是利用主模块的provider主动注册controller; // 但是由于provider不能直接使用,所以我们把它存在主模块下面; // 通过存下来的方法,可以用来注册异步加载回来的页面组件。 app.registerController = $controllerProvider.register; app.loadFile = function(js) { return function($rootScope, $q) { //通过$q服务注册一个延迟对象 deferred var def = $q.defer(), deps = []; angular.isArray(js) ? (deps = js) : deps.push(js); require(deps, function() { $rootScope.$apply(function() { // 成功 def.resolve(); // def.reject() 不成功 // def.notify() 更新状态 }); }); //通过deferred延迟对象,可以得到一个承诺promise,而promise会返回当前任务的完成结果 return def.promise; }; } $urlRouterProvider.otherwise('/index'); $stateProvider.state("index", { url: "/index", template: "这是首页页面" }); $stateProvider.state("computers", { url: "/computers", template: "这是电脑分类页面{{title}}", controller: "ctrl.file", resolve: { loadFile: app.loadFile("file") } }); $stateProvider.state("printers", { url: "/printers", template: "这是打印机页面" }); $stateProvider.state("blabla", { url: "/blabla", template: "其他" }); } ]); });
// file.js define(["app"], function(app) { app.registerController("ctrl.file", function($scope) { $scope.title = "--测试 "; }); });
源码:requireLearn_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 本篇文章主要介绍了ThinkPHP+jquery实现“加载更多”功能代码,以实例代码讲诉了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下 ...2017-03-13
- AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了!随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性...2015-10-21
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22
- 这篇文章主要介绍了AngularJS实现Model缓存的方式,分享了多种AngularJS实现Model缓存的方法,感兴趣的小伙伴们可以参考一下...2016-02-05
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
- 本文主要介绍AngularJS 视图,这里整理了相关知识,并附代码示例和实现效果图,有兴趣的小伙伴可以参考下...2016-08-27
- 本文主要介绍AngularJS 依赖注入的知识,这里整理了相关的基础知识,并附示例代码和实现效果图,有兴趣的小伙伴可以参考下...2016-08-24
- 这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下...2015-12-27
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24- angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一,下面通过本文给大家介绍AngularJs中route的使用方法和配置,感兴趣的朋友一起学习吧...2016-02-09
- 下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕的方法汇总,需要的朋友参考下...2016-02-12
- 任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段...2016-01-05
- 这篇文章主要为大家详细介绍了AngularJS内建服务$location及$location功能,感兴趣的小伙伴们可以参考一下...2016-07-06
Angularjs中如何使用filterFilter函数过滤
这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下...2016-02-12- 这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-11-02
AngularJS使用ngOption实现下拉列表的实例代码
这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25- AngularJS 让人爱不释手的八种功能,想知道AngularJS哪八种功能让人喜欢就快点看下本文吧...2016-03-28