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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Vue精简版风格概述
Jan 30 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python字符串格式化输出方法分析
2016/04/13 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
大学生活学习的自我评价
2013/12/03 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2016年感恩节寄语
2015/12/07 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS