国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

angularjs學習筆記——使用requirejs動態注入控制器

王軍 / 2733人閱讀

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

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

demo目錄如下圖:

index.html文件的內容:





    
    demo
    
    
    


    

在引入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的一個手動啟動框架的函數
        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"]);
    
    // ...第二部分:路由配置...
    // ...第三部分:復用的動態注入控制器函數
    
    // 向main.js返回這個blogApp
    return blogApp;
});

第二部分:設置基礎路由

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

第三部分:復用的控制器注入函數

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

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

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

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

// ListCtrl.js

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

剩下的事情就是在list.html中接收控制器傳送的數據了:


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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79208.html

相關文章

  • Angular 4 簡單入門筆記

    摘要:首先,我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉,定義該路由激活時的樣式類。 剛實習的時候用過AngularJS,那時候真的是連原生JavaScript都不會寫,依樣畫葫蘆做了幾個管理后臺。然后突然換項目了,AngularJS就不寫了,感覺前前后后接觸了一年多的Angula...

    whlong 評論0 收藏0
  • RequireJS學習筆記

    摘要:如果有疑惑的地方,歡迎討論,我是初學,希望能切磋和得到指點加載會阻塞頁面加載默認異步加載文件方法一把放到頁面底部加載方法二支持定義全局相對路徑方法一自定義屬性指定網頁程序的主模塊文件定義整個網頁代碼的入口文件的相對位置,以后此文件 如果有疑惑的地方,歡迎討論,我是初學,希望能切磋和得到指點; js加載會阻塞頁面加載: //requirejs默認異步加載js文件; 方法一...

    hersion 評論0 收藏0
  • 前端資源系列(4)-前端學習資源分享&前端面試資源匯總

    摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...

    princekin 評論0 收藏0
  • require.js學習筆記

    摘要:他僅需簡單地通過一個標簽發起請求,是實現跨域服務調用一種公認手段。為了在中使用服務,須要將參數的值指定為。該示例中,的參數為,因此告訴將響應包裹到一個中 加載JavaScript文件 RequireJS的目的是鼓勵代碼的模塊化,它使用了不同于傳統script標簽的腳本加載步驟。可以用它來加速、優化代碼,但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地...

    K_B_Z 評論0 收藏0
  • AngularJS學習筆記(2) --- 指令參數和scope綁定策略

    摘要:引言指令可以說是的核心,而其開發也是比較困難的,本文主要介紹指令的一些參數和的綁定策略。指令執行的優先級,用于多個指令同時作用于同一個元素時。改變父會影響指令,而改變指令不會影響父。在父和指令之間建立雙向綁定。 引言 指令(Directive)可以說是 AngularJS 的核心,而其開發也是比較困難的,本文主要介紹指令的一些參數和scope的綁定策略。 參數 從 AngularJS ...

    AndroidTraveler 評論0 收藏0

發表評論

0條評論

王軍

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<