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 事件冒泡简介及应用
Jan 11 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JSONP原理及简单实现
Jun 08 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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选项卡的简单使用
2017/05/26 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
nodejs基础应用
2017/02/03 NodeJs
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python在地图上画比例的实例详解
2020/11/13 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
什么是继承
2013/12/07 面试题
会议活动邀请函
2014/01/27 职场文书
单身联谊活动方案
2014/01/29 职场文书
房地产广告策划方案
2014/05/15 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python