AngulerJS学习（五）按需动态载入文件

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

$q

简单介绍：

$q：主要解决的是异步编程的问题，是指描写叙述通过一个承诺行为与对象代表的异步运行的行动结果的交互。可能会也可能不会再不论什么时候完毕。

我们通过一个小故事理解 $q 服务。

1. 中午点外买，打电话要了份炒饭，要求送到公司并给了老板详细地址。这个过程就是 $q.defer。
2. 饭菜不可能马上送到，因此这是一个延期响应的请求；
3. 老板说尽快送到。也就是老板给了我一个承诺 promise；
4. 我能够边工作边等待，说明这个请求是个异步运行的过程。
5. 这样这个延期异步请求就算建立完毕了。就是一个deferred。
6. 饭菜送到我去接受，这个过程称为 deferred.resolve(data) 响应事件。
7. 假设米饭卖完了老板会告诉我做不了了。也就是拒绝我的请求了，就是 deferred.reject(error)；
8. 老板能够再不论什么时候跟我说做不了。仅仅要在他还没把饭送来之前都能够。
9. 快到楼下了，通知我去取。这就是通知 deferred.notify(data)
   
   这样整个异步回调过程就完毕了。
10. 第二天我们好多人都要订餐。所以我就能够发起 $q.all(req1,req2,req3.)。

使用

我们在服务中这样定义。在请求開始之间建立deferred，然后return deferred.promise.在获取到数据的时候deferred.resolve(data)。相同我们在中间能够收到通知或者拒绝等。

var def = $q.defer();
def.resolve(data);
return def.promise;

按需载入

首先我们要了解一下几点：

• 什么时机下载入：
  
  在 ngRoute 和 uiRoute 中都提供了 resolve 属性里的值会在路由成功前被预先设定好，然后注入到控制器中。通俗地将。就是等数据都“就位”后。才进行路由（事实上我认为也不能叫路由。因为路由是一些列的操作。当中就包含了设置 resolve 属性等等）。

  能够參考我的上篇文章。

• 载入后的文件怎样注冊：
  
  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 = "--測试 ";
    });
});

源代码：https://github.com/ZangYuSong/requireLearn