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 相关文章推荐
jQuery1.6 正式版发布并提供下载
May 05 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Python 2与Python 3版本和编码的对比
2017/02/14 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python 利用toapi库自动生成api
2020/10/19 Python
简单叙述一下MYSQL的优化
2016/05/09 面试题
学期自我评价
2014/01/27 职场文书
小学生作文评语
2014/04/18 职场文书
安全协议书
2014/04/23 职场文书
如何写股份合作协议书
2014/09/11 职场文书
新员工辞职信范文
2015/05/12 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python