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 相关文章推荐
判断滚动条到底部的JS代码
Nov 04 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
JavaScript手风琴页面制作
May 17 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python如何生成各种随机分布图
2018/08/27 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
tensorflow如何批量读取图片
2019/08/29 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
关于保护环境的建议书
2014/05/13 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
mysql数据库隔离级别详解
2022/06/16 MySQL