AngulerJS学习之按需动态加载文件


Posted in Javascript onFebruary 13, 2017

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

$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_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
javascript基本类型详解
Nov 28 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
JavaScript获取ul中li个数的方法
Feb 13 #Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 #Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 #Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 #Javascript
详谈js中window.location.search的用法和作用
Feb 13 #Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 #Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 #Javascript
You might like
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
js右键菜单效果代码
2007/07/21 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS常见算法详解
2017/02/28 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python os用法总结
2018/06/08 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
旅游个人求职信范文
2014/01/30 职场文书
二年级小学生评语
2014/04/21 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP