当前位置: 首页 > 编程日记 > 正文

AngulerJS学习(五)按需动态载入文件

在此之前我么年首先要先了解几个东西:

$q

简单介绍:

$q:主要解决的是异步编程的问题,是指描写叙述通过一个承诺行为与对象代表的异步运行的行动结果的交互。可能会也可能不会再不论什么时候完毕。

我们通过一个小故事理解 $q 服务。

  1. 中午点外买。打电话要了份炒饭,要求送到公司并给了老板详细地址。

    这个过程就是 $q.defer;

  2. 饭菜不可能马上送到,因此这是一个延期响应的请求;
  3. 老板说尽快送到。也就是老板给了我一个承诺 promise;
  4. 我能够边工作边等待,说明这个请求是个异步运行的过程。
  5. 这样这个延期异步请求就算建立完毕了。就是一个deferred。

  6. 饭菜送到我去接受,这个过程称为 deferred.resolve(data) 响应事件;
  7. 假设米饭卖完了老板会告诉我做不了了,也就是拒绝我的请求了,就是 deferred.reject(error);
  8. 老板能够再不论什么时候跟我说做不了,仅仅要在他还没把饭送来之前都能够。
  9. 快到楼下了,通知我去取。这就是通知 deferred.notify(data)
    这样整个异步回调过程就完毕了。

  10. 第二天我们好多人都要订餐。所以我就能够发起 $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

相关文章:

【青少年编程竞赛交流】11月份微信图文索引

11月份微信图文索引 由于“组队学习”这个公众号的功能主要是组织Datawhale社群中的学习者们每个月的组队学习,所以,我另外新建了这个微信公众号“青少年编程竞赛交流”,在这个公众号上分享有关青少年编程方面的知识,以及通过编程…

linux内核创建节点,Linux内核驱动自动创建设备节点文件

Linux下生成驱动设备节点文件的方法有3个:1、手动mknod;2、利用devfs;3、利用udev在刚开始写Linux设备驱动程序的时候,很多时候都是利用mknod命令手动创建设备节点,实际上Linux内核为我们提供了一组函数,可…

javascript publish/subscribe or observer pattern

定义 定义一对多的对象封装,目标对象状态发生变化,它所有的接受者都会收到通知并做相应的更新。 使用频率:5/5 最高 概要 观察者模式,也就是发布者/订阅者模式,当发布者发布一个通知的时候,订阅者就会收到通…

图的遍历——DFS(邻接矩阵)

递归 标记 一个连通图只要DFS一次&#xff0c;即可打印所有的点。 #include <iostream> #include <cstdio> #include <cstdlib> #include <cstring> #include <malloc.h>using namespace std;const int VERTEX_NUM 20; const int INFINITY 0x…

徐韬:CCF - 个贷违约预测Baseline

徐韬是华北电力大学数理系大四的学生&#xff0c;Datawhale成员/Dreamtech成员&#xff0c;参加了多期Datawhale的组队学习&#xff0c;也在天池/CCF/讯飞等比赛中取得了不错的成绩&#xff0c;现保送大连理工大学软件学院深造。 这篇图文是他在线下组队学习时&#xff0c;为大…

linux 创建crontab文件位置,[基础教程]linux系统的crontab计划任务添加和删除

在linux系统中&#xff0c;有时候为了节省人力&#xff0c;所以将一些脚本进行定时执行&#xff0c;通过crontab计划任务进行启动和停止&#xff0c;这样能方便大部分时间来做其他事情&#xff0c;下面主要介绍一下如何启动和删除crontab计划任务添加计划任务1.首先要准备好要添…

C#利用lambda在函数中创建内部函数

有使用过JS的朋友&#xff0c;相信都知道function。JS中的function是可以在里面在定义一个作为内部使用的。有时为了控制作用域&#xff0c;或者这种小函数只在这个函数体内会使用&#xff0c;所以就不希望在外部在作额外的定义。那C#中有没有这样类似的方式呢&#xff1f;答案…

IntellJ_打开选中的文件所在的文件夹

方法&#xff08;一&#xff09;最简单 idea 打开 setting 找到keymap 搜索 show in explorer 右键设置一个快捷键 我一般设置 alt v 然后点击项目其中一个文件位置 比如我点击一个 hellowworld.class 然后我按 alt v 就会自己打开他在本地的位置 方法&#xff08;二&#x…

姜子上:利用BiLSTM-CRF进行命名实体识别

姜子上是华北电力大学数理系大二的学生&#xff0c;LSGO软件技术团队&#xff08;Dreamtech算法组&#xff09;成员&#xff0c;参加了多期Datawhale的组队学习。 这篇图文是他在线下组队学习时&#xff0c;为大家分享自己学习“知识图谱”过程中的笔记。 希望参与我们线下组…

linux命令行3d,Linux命令行快捷键

总结一下&#xff1a;1.移动光标&#xff1a;1.1 行首 ctrla1.2 行末 ctrle1.3 前移一字符 ctrlb(注&#xff1a;因为左边的内容先于右边输入 &#xff0c;故向左为向前&#xff0c;向右为向后)1.4 后移一字符 ctrlf1.5 前移一词 altb1.6 后移一词 altf2.删除2.1 删除至行首 ct…

Linux系统配置VI或VIM的技巧

Linux系统配置VI或VIM的技巧作者&#xff1a;IT专家网论坛出处&#xff1a;IT专家网论坛2008-10-28 11:08配置VI和VIM的颜色显示&#xff0c;使它能够高亮度显示一些特别的单词&#xff0c;这对编写程序很有用⋯⋯  1、VI或VIM的配置文件的路径  发现/usr/share/vim/vimrc和…

【组队学习】十一月微信图文索引

十一月微信图文索引 一、组队学习相关 周报&#xff1a; Datawhale组队学习周报&#xff08;第037周&#xff09;Datawhale组队学习周报&#xff08;第038周&#xff09;Datawhale组队学习周报&#xff08;第039周&#xff09;Datawhale组队学习周报&#xff08;第040周&…

僵尸(bot)程序缓解

2019独角兽企业重金招聘Python工程师标准>>> 与浮在表面而广受关注的间谍软件、广告软件、垃圾邮件不同&#xff0c;僵尸程序往往不受注意。它们是散发间谍软件、广告软件、垃圾邮件的罪魁祸首&#xff0c;已经被列为对个人用户及企业 威胁不断增加的一种安全危害。…

Linux火狐解压完运行不了,在Ubuntu系统下firefox账号无法登录的解决

在Ubuntu 16.04系统下默认自带有firefox浏览器&#xff0c;但是使用这个firefox浏览器会发现账号无法登录&#xff0c;原来是在windows系统下的数据没有办法同步&#xff0c;书签也同步不了。经过查询资料后得知&#xff0c;Ubuntu系统下自带的firefox浏览器是国际版本&#xf…

[亿能测试_www.gdtesting.com]测试技术资料网盘共享

[亿能测试_www.gdtesting.com]测试技术资料网盘共享: http://pan.baidu.com/share/home?uk974090852 转载于:https://www.cnblogs.com/preftest/p/3249341.html

【NCEPU】吴丹飞:新闻文章点击预测

吴丹飞是华北电力大学数理系大三的学生&#xff0c;LSGO软件技术团队&#xff08;Dreamtech算法组&#xff09;成员&#xff0c;参加了多期Datawhale的组队学习&#xff0c;荣获多期优秀队长的称号。 这篇图文是她在线下组队学习时&#xff0c;为大家分享自己参与天池“新闻文…

centos中执行apt-get命令提示apt-get command not found

在centos下用yum install xxxyum和apt-get的区别一般来说著名的linux系统基本上分两大类&#xff1a; 1.RedHat系列&#xff1a;Redhat、Centos、Fedora等 2.Debian系列&#xff1a;Debian、Ubuntu等 RedHat 系列 1 常见的安装包格式 rpm包,安装rpm包的命令是“rpm -参数” 2 包…

在linux上装git教程,教你玩转Git-Linux 平台上安装

导读Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同&#xff0c;它采用了分布式版本库的方…

jsp中如何判断el表达式中的BigDecimal==0

比较蠢一点的做法&#xff1a; <c:if test"${not ((someBigDecimal < 0) or (someBigDecimal > 0))}"> (在JSP2.2里面)好点的做法&#xff1a; ${someBigDecimal.unscaledValue() 0} 使用fn函数的做法: ${fn:isZero(someBigDecimal)} 转载于:https://ww…

zabbix 安装时的报错mysql_connect(): Access denied for us

zabbix在安装完成时的报错出现提示&#xff1a;mysql_connect(): Access denied for user zabbixlocalhost (using password: YES) [include/db.inc.php:77]解决方法&#xff1a;# vim /etc/zabbix/web/zabbix.conf.php ## 修改对应数据库的密码即可&#xff0c; 这是…

【NCEPU】毛慧昀:Matplotlib数据可视化

毛慧昀是华北电力大学计算机系大三的学生&#xff0c;LSGO软件技术团队&#xff08;Dreamtech算法组&#xff09;成员&#xff0c;参加了多期Datawhale的组队学习&#xff0c;荣获多期优秀队长的称号。 这篇图文是她在线下组队学习时&#xff0c;为大家分享自己学习Matplotlib…

linux qml 环境,利用Qml与Golang打造Gui客户端(二)qamel环境安装

由于种种原因&#xff0c;放弃了therecipe/qt&#xff0c;转向了更为轻量级的qamel&#xff0c;这个库的安装非常简单&#xff0c;跟随着以下步骤就能解决安装安装qamel非常简单&#xff0c;只需要go get -v github.com/go-qamel/qamel即可。如果一切顺利&#xff0c;将会自动编…

uboot readme 文件 (1)

Software Configuration:软件的配置Configuration is usually done using C preprocessor defines; therationale behind that is to avoid dead code whenever possible.使用c的预处理 避免 “dead code” 两种配置变量There are two classes of configuration variables: * C…

青少年编程竞赛交流群周报(第040周)

2021年12月05日&#xff08;周日&#xff09;晚20:00我们在青少年编程竞赛交流群开展了第四十期直播活动。 一、直播内容 我们直播活动的主要内容如下&#xff1a; 讲解了上次测试中小朋友们做错的题目 Scratch青少年编程能力等级测试模拟题&#xff08;四级&#xff09;。演…

用Cordova打包Vue-vux项目

技术搭建&#xff1a;vue vux 首先推荐阅读这篇文章&#xff0c;写的已经很详细了&#xff1a;https://www.jianshu.com/p/25d797b983cd 此处记录下我按照这篇文章打包的时候报的一些错误&#xff0c;方便大家借鉴&#xff1a; 1、当执行最后一步 cordova build android 时&a…

linux mpp集群环境,Linux环境下,DM8-MPP两节点集群搭建

目录1.主备库&#xff0c;监视器信息部署2.初始化数据库实例3.启停数据库4.数据库备份与还原5.检查、修改和创建配置文件6.启动数据库&#xff0c;修改数据库模式和OGUID8.配置守护进程9.配置监视器10.启动守护进程11.启动监视器1.主备库&#xff0c;监视器信息部署(1)主库实例…

线性代数 2021-2022-1 考试要点

1、线性方程组解的判定、解的结构与求解&#xff1b; 2、矩阵秩的相关性质&#xff1b; 3、矩阵、分块矩阵的运算&#xff1b; 4、行列式的运算&#xff1b; 5、矩阵方程的求解&#xff1b; 6、向量空间&#xff08;RnR^nRn空间&#xff0c;多项式空间&#xff0c;矩阵空间…

JavaServer Faces技术

一、JSF是构建Java Web程序的服务器端的组件框架&#xff0c;包括&#xff1a; 1&#xff09;一个API&#xff0c;用来表示组件及管理他们的状态&#xff1b;处理事件&#xff1b;服务器端&#xff1b;数据转换&#xff1b;定义页面导航&#xff1b;支持国际化和可访问性&#…

Ubuntu安装Anaconda

安装Anaconda的最简单方法是下载最新的Anaconda安装程序bash脚本&#xff0c;然后运行它。 在Anaconda Downloads页面找到最新版本的Anaconda for Python 3 。当前最新版本为5.1.0。 切换到/tmp服务器上的目录 cd /tmp 在运行它之后可以删除掉。 使用wget命令下载anaconda安装包…

linux制作共享服务器,Linux如何制作一个简单的共享服务器

Linux下打开一个终端&#xff0c;cd 到某一个目录下&#xff0c;输入“ python -m SimpleHTTPServer ”&#xff0c;就可以将当前目录下的内容分享出去&#xff0c;如下&#xff1a;linuxidc www.linuxidc.com:~$ cd VideoSpace/linuxidc www.linuxidc.com:~/VideoSpace$ pytho…