AngulerJS学习之按需动态加载文件_网络技术_宿州市腾雀网络科技有限公司

AngulerJS学习之按需动态加载文件

发布时间 - 2026-01-10 23:00:45 点击率：次

在此之前我们首先要先了解几个东西：

简介：

$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_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angularjs # 按需加载 # angularjs按需加载js # 异步加载 # AngularJS中的按需加载ocLazyLoad示例 # 探索angularjs+requirejs全面实现按需加载的套路 # AngularJS 实现按需异步加载实例代码 # 有个 # 这是 # 加载 # 往里 # 他就 # 你在 # 把它 # 给了 # 只有一个 # 要了 # 解决这个问题 # 可以用来 # 的是 # 完成了 # 几个 # 是个 # 不可能 # 我说 # 我觉得 # 都要

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：c++如何用tcmalloc优化内存 c++ Google性

下一篇：低成本建站：社交媒体整合对网站流量增长的影响

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：c++如何用tcmalloc优化内存 c++ Google性

下一篇：低成本建站：社交媒体整合对网站流量增长的影响