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)。同样我们在中间可以收到通知或者拒绝等。

按需加载

首先我们要了解一下几点:

1、什么时机下加载:

在 ngRoute 和 uiRoute 中都提供了 resolve 属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置 resolve 属性等等)。可以参考我的上篇文章。

2、加载后的文件如何注册:

angular有个启动函数,叫做bootstrap。 根据angular的代码设计,你需要在启动之前定义所有的controller。就好似有个袋子,你在bootstrap之前想往里塞什么就塞什么。可是一旦bootstrap了,他就不再接受你任何往里塞的controller了。

解决这个问题,只有一个方法,就是利用主模块的provider主动注册controller。但是由于provider不能直接使用,所以我们把它存在主模块下面。通过存下来的方法,可以用来注册异步加载回来的页面组件。

通过上述我们知道了需要异步加载文件

实现

源码:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)