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;
按需载入
首先我们要了解一下几点:
- 什么时机下载入:
在 ngRoute 和 uiRoute 中都提供了 resolve 属性里的值会在路由成功前被预先设定好。然后注入到控制器中。通俗地将。就是等数据都“就位”后。才进行路由(事实上我认为也不能叫路由,因为路由是一些列的操作,当中就包含了设置 resolve 属性等等)。能够參考我的上篇文章。
- 载入后的文件怎样注冊:
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 = "--測试 ";});
});
源代码:https://github.com/ZangYuSong/requireLearn
AngulerJS学习(五)按需动态载入文件相关推荐
- 【unity3d--初始学习五--c#脚本对xml文件的创建和解析】
本人用c#编写脚本. 创建xml文件时,主要用到System.Xml包中的XmlDocument,XmlNode,XmlElement.下面是创建xml文档的一般步骤: XmlDocument doc ...
- python学习的第二十五天:对PDF文件的读写操作
文章目录 python学习的第二十五天:对PDF文件的读写操作 对Excel操作的补充 python的实用方法 获取指定文件下的所有内容 shutil模块(封装了高级的文件操作函数) PDF的相关操作 ...
- (转)MyBatis框架的学习(五)——一对一关联映射和一对多关联映射
http://blog.csdn.net/yerenyuan_pku/article/details/71894172 在实际开发中我们不可能只是对单表进行操作,必然要操作多表,本文就来讲解多表操作中 ...
- 马老师的闪电五连鞭动态词云图会是怎么样的呢?丝毫不比街舞差
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于法纳斯特 ,作者小F 刚接触Python的新手.小白,可以复制下面的链接去免费观看P ...
- 深入浅出Android动态载入jar包技术
在实际项目中.因为某些业务频繁变更而导致频繁升级client的弊病会造成较差的用户体验,而这也恰是Web App的优势,于是便衍生了一种思路.将核心的易于变更的业务封装在jar包里然后通过网络下载下来 ...
- linux iso的引导文件,Linux_从硬盘启动Desktop ISO所需的引导文件,一、仅从硬盘启动Destdop ISO 并 - phpStudy...
从硬盘启动Desktop ISO所需的引导文件 一.仅从硬盘启动Destdop ISO 并安装 1.从后面的链接下载相关引导文件并解压: 2.在任意盘的根目录中新建一个文件夹,并重命名(如feisty ...
- dll侧加载_动态载入DLL所需要的三个函数详解(LoadLibrary,GetProcAddress,FreeLibrary)...
动态载入 DLL 动态载入方式是指在编译之前并不知道将会调用哪些 DLL 函数, 完全是在运行过程中根据需要决定应调用哪些函数. 方法是:用 LoadLibrary 函数加载动态链接库到内存,用 Ge ...
- 使用计算机管理文件教后反思,五年级信息技术下册《文件和文件夹》教学设计和教学反思...
五年级信息技术下册<文件和文件夹>教学设计和教学反思 一.教材分析. 本课是小学信息技术五年级下册第二课<文件和文件夹>的部分内容,文件和文件夹的管理是学生熟练使用计算机的前提 ...
- 【转载】动态载入DLL所需要的三个函数详解(LoadLibrary,GetProcAddress,FreeLibrary)...
原文地址:https://www.cnblogs.com/westsoft/p/5936092.html 动态载入 DLL 动态载入方式是指在编译之前并不知道将会调用哪些 DLL 函数, 完全是在运行 ...
最新文章
- 基于OpenCV与tensorflow实现实时手势识别
- 分享一个C#读取计算机信息的类
- Git 远程仓库分支管理
- WinForms多线程编程之多线程计算器
- 使用 jdbc 从数据库中查询数据
- dB dBm dBW 的关系与换算
- js从地址栏获取参数
- 如何使用http://paste.ubuntu.com/分享代码
- 合泰单片机点灯c语言程序,ht66f018合泰单片机暖风机的C语言源程序
- 自相关法基音提取的matlab程序,自相关函数法基音检测matlab程序
- 心流体验:专注的快乐--读书笔记
- 模仿风宇博客登录蒙层弹窗(vuex+computed实现)
- 原生js中attributes属性
- 西门子定位器的功能和分类!
- 录像机前面板指示灯显示详解
- java el 表达式_Javaweb之EL表达式
- uni-app Simple
- Java SpringMVC三层架构及执行流程
- Arduino ESP8266 MQTT 阿里 腾讯 连接示例
- IOS开发视频教程《保卫萝卜》-任亮-专题视频课程
热门文章
- java获取真实ip
- 河南省第二届ACM程序设计大赛解题报告(置换群)
- [总结]博客聚合-cnblogs,wordpress,live writer,word2010
- Proxy与NAT有什么区别
- ZendFramework的介绍、安装和实例运行
- linux系统proc目录进程信息详解
- 大学生创业难?现在已不是问题!
- php工程模式,PHP设计模式(八):工厂模式
- mysql 执行计划extra_MySQL执行计划extra中的using index 和 using where using index 的区别...
- 迪杰斯特拉算法c++_《算法图解》学习记录7--迪杰斯特拉算法