摘要：最近一段時(shí)間在學(xué)習(xí)，由于覺得直接使用它需要加載很多的文件，因此想使用來實(shí)現(xiàn)異步加載，并動態(tài)注入控制器。手動啟動，特別說明此處的不是那個(gè)框架，而是的一個(gè)手動啟動框架的函數(shù)中完成了各模塊的初始化，并且引入了。

最近一段時(shí)間在學(xué)習(xí)angularjs，由于覺得直接使用它需要加載很多的js文件，因此想使用requirejs來實(shí)現(xiàn)異步加載，并動態(tài)注入控制器。簡單搜索了下發(fā)現(xiàn)好多教程寫的都很復(fù)雜，所以打算寫一下我的方法，算是學(xué)習(xí)筆記了。

demo目錄如下圖：

index.html文件的內(nèi)容：

在引入main.js后，就需要在其中完成requirejs的初始化：

// main.js

"use strict";

(function (win) {
    require.config({
        baseUrl: "./",
        // 依賴相對路徑
        paths: {               
            "angular": "libs/angular.min",
            "angular-route": "libs/angular-route.min"
        },
        // 引入沒有使用requirejs模塊寫法的類庫
        shim: {
            "angular": {
                exports: "angular"
            },
            "angular-route": {
                // angular-route依賴angular
                deps: ["angular"],
                exports: "ngRoute"
            }
        }
    });
    
    // 自動導(dǎo)入router.js模塊，由于后綴名可以省略，故寫作"router",
    // 并將模塊返回的結(jié)果賦予到router中。
    require(["angular","router"], function(angular,router){
        // 手動啟動angularjs，特別說明此處的bootstrap不是那個(gè)ui框架，
        // 而是angularjs的一個(gè)手動啟動框架的函數(shù)
        angular.bootstrap(document, ["blogApp"]);
    });
})(window);

main.js中完成了各模塊的初始化，并且引入了router.js。
下面我們在router.js中配置路由：

// router.js

define(["angular", "require", "angular-route"], function (angular, require) {

    var blogApp = angular.module("blogApp",["ngRoute"]);

    blogApp.config(["$routeProvider","$controllerProvider",
        function($routeProvider,$controllerProvider) {
            $routeProvider
            .when("/", {
                templateUrl:"templates/list.html",
                controller: "ListCtrl",
                resolve:{
                    delay : ctrlRegister("ListCtrl",["controllers/ListCtrl.js"])
                }
            })
            .when("/data", {
                templateUrl:"templates/data.html",
                controller: "DataCtrl",
                resolve:{
                    delay : ctrlRegister("DataCtrl",["controllers/DataCtrl.js"])
                }
            })
            .otherwise({
                redirectTo: "/"
            });

            function ctrlRegister (ctrlName, ctrlModule) {
                return function ($q) {
                    var defer = $q.defer();
                    require(ctrlModule, function (controller) {

                        $controllerProvider.register(ctrlName, controller);

                        defer.resolve();
                    });
                    return defer.promise;
                }
            }
        }
    ]);

    return blogApp;
});

我把這里面拆為分三個(gè)部分來說
第一部分：定義該模塊

// 引入3個(gè)基礎(chǔ)模塊
define(["angular", "require", "angular-route"], function (angular, require) {
    
    // 定義整個(gè)demo為一個(gè)名為blogApp的模塊
    var blogApp = angular.module("blogApp",["ngRoute"]);
    
    // ...第二部分：路由配置...
    // ...第三部分：復(fù)用的動態(tài)注入控制器函數(shù)
    
    // 向main.js返回這個(gè)blogApp
    return blogApp;
});

第二部分：設(shè)置基礎(chǔ)路由

blogApp.config(["$routeProvider","$controllerProvider",
        function($routeProvider,$controllerProvider) {
            $routeProvider
            .when("/", {
                // 模板地址
                templateUrl:"templates/list.html",
                // 控制器的名字
                controller: "ListCtrl",
                // resolve用來在完成路由前處理一些事
                // 這里用來動態(tài)加載并注入相應(yīng)的控制器
                resolve:{
                    // ctrlRegister為我自己寫的一個(gè)復(fù)用的函數(shù)，
                    // 用于注入控制器。見第三部分
                    delay : ctrlRegister("ListCtrl",["controllers/ListCtrl.js"])
                }
            });
       }
}

第三部分：復(fù)用的控制器注入函數(shù)

// 該函數(shù)接受兩個(gè)參數(shù)
// ctrlName，字符串類型，為該控制器的名字
// ctrlModule，字符串?dāng)?shù)組類型，為要引入的控制器的相對地址
// 調(diào)用例如 ctrlRegister("ListCtrl",["controllers/ListCtrl.js"])
function ctrlRegister (ctrlName, ctrlModule) {

    return function ($q) {
        var defer = $q.defer();
        // 加載該控制器，并將返回值賦給controller，返回值一般是一個(gè)控制器函數(shù)
        require(ctrlModule, function (controller) {
            // 將返回值注冊為名稱為ctrlName的控制器
            $controllerProvider.register(ctrlName, controller);

            defer.resolve();
        });
        // 完成注冊
        return defer.promise;
    }
}

好了，這樣就完成了動態(tài)加載的功能了，下面就可以寫要動態(tài)加載的控制器了
用其中一個(gè)控制器ListCtrl.js來說明問題：

// ListCtrl.js

// 加載angular模塊
define(["angular"], function (angular) {
    將本控制器函數(shù)作為結(jié)果返回給router.js
    return function ListCtrl( $scope ){
        $scope.lists = ["1","2","3"];
    };
});

剩下的事情就是在list.html中接收控制器傳送的數(shù)據(jù)了：

最終實(shí)現(xiàn)的功能是：
比如我訪問http://127.0.0.1/demo/#/只會加載list.html和ListCtrl.js；
而當(dāng)訪問http://127.0.0.1/demo/#/data就只會加載data.html和DataCtrl.js。
這樣做有什么好處呢？當(dāng)有很多控制器時(shí)，可以按需加載相應(yīng)的控制器，不會一股腦全部加載上來（看起來依然并沒有什么卵用）。
很慚愧，只為大家節(jié)約了一點(diǎn)微小的帶寬，謝謝大家。