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

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

demo目錄如下圖：

index.html文件的內容：

在引入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"
            }
        }
    });
    
    // 自動導入router.js模塊，由于后綴名可以省略，故寫作"router",
    // 并將模塊返回的結果賦予到router中。
    require(["angular","router"], function(angular,router){
        // 手動啟動angularjs，特別說明此處的bootstrap不是那個ui框架，
        // 而是angularjs的一個手動啟動框架的函數(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;
});

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

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

第二部分：設置基礎路由

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

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

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

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

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

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

// ListCtrl.js

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

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

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