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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
vue组件学习教程
2017/09/09 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python 12306抢火车票脚本
2018/02/07 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Python tcp传输代码实例解析
2020/03/18 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
合作意向协议书范本
2014/03/31 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
小学毕业演讲稿
2014/04/25 职场文书
学籍证明模板
2014/11/21 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android