AngularJs 動態載入模塊和依賴註入

来源:http://www.cnblogs.com/ys-ys/archive/2016/01/10/5119086.html

最近項目比較忙額,白天要上班,晚上回來還需要做Angular知識點的ppt給同事,畢竟年底要辭職了,項目的後續開發還是需要有人接手的,所以就占用了晚上學習的時間。本來一直不打算寫這些第三方的學習筆記,不過覺得按需載入模塊並且成功使用這個確實是個好處,還是記錄下來吧。基於本獸沒怎麼深入的使用requi...

最近項目比較忙額,白天要上班,晚上回來還需要做Angular知識點的ppt給同事,畢竟年底要辭職了,項目的後續開發還是需要有人接手的,所以就占用了晚上學習的時間。本來一直不打算寫這些第三方插件的學習筆記,不過覺得按需載入模塊並且成功使用這個確實是個好處,還是記錄下來吧。基於本獸沒怎麼深入的使用requireJs,所以本獸不知道這個和requireJs有什麼區別,也不能清晰的說明這到底算不算Angular的按需載入。

為了實現這篇學習筆記知識點的效果,我們需要用到:

angular:https://github.com/angular/angular.js

ui-router:https://github.com/angular-ui/ui-router

ocLazyLoad:https://github.com/ocombe/ocLazyLoad

廢話不多說,進入正題...

首先我們看下文件結構:

Angular-ocLazyLoad                      --- demo文件夾
    Scripts                             --- 框架及插件文件夾
        angular-1.4.7                   --- angular 不解釋
        angular-ui-router               --- uirouter 不解釋
        oclazyload                      --- ocLazyload 不解釋
        bootstrap                       --- bootstrap 不解釋
        angular-tree-control-master     --- angular-tree-control-master 不解釋
        ng-table                        --- ng-table 不解釋
        angular-bootstrap               --- angular-bootstrap 不解釋
    js                                  --- js文件夾 針對demo寫的js文件
        controllers                     --- 頁面控制器文件夾
            angular-tree-control.js     --- angular-tree-control控制器代碼
            default.js                  --- default控制器代碼
            ng-table.js                 --- ng-table控制器代碼
        app.config.js                   --- 模塊註冊及配置代碼
        oclazyload.config.js            --- 載入模塊配置代碼
        route.config.js                 --- 路由配置及載入代碼
    views                               --- html頁面文件夾
        angular-tree-control.html       --- angular-tree-control插件的效果頁面
        default.html                    --- default頁面
        ng-table.html                   --- ng-table插件效果頁面
        ui-bootstrap.html               --- uibootstrap插件效果頁面
    index.html                          --- 主頁面

註意:這個demo沒做嵌套路由,只是簡單實現單視圖的路由以展示效果。

我們來看主頁面的代碼:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" />
    <script src="Scripts/angular-1.4.7/angular.js"></script>
    <script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"></script>
    <script src="js/app.config.js"></script>
    <script src="js/oclazyload.config.js"></script>
    <script src="js/route.config.js"></script>
</head>
<body>
<div ng-app="templateApp">
    <div>
        <a href="#/default">主頁</a>
        <a href="#/uibootstrap" >ui-bootstrap</a>
        <a href="#/ngtable">ng-table</a>
        <a href="#/ngtree">angular-tree-control</a>
    </div>
    <div ui-view></div>
</div>
</body>
</html>

在這個頁面,我們只載入了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js,以及3個配置的js文件。
再看看四個頁面的html代碼:
angular-tree-control效果頁面

  <treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
      {{node.title}}
  </treecontrol>

頁面上有個使用該插件對應的指令。
default頁面

  <div class="ng-cloak">
      {{default.value}}
  </div>

這裡我們只是用來證明載入並正確執行default.js。
ng-table效果頁面

<div class="ng-cloak">
    <div class="p-h-md p-v bg-white box-shadow pos-rlt">
        <h3 class="no-margin">ng-table</h3>
    </div>
    <button ng-click="ngtable.tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
    <p>
        <strong>Sorting:</strong> {{ngtable.tableParams.sorting()|json}}
    </p>
    <table ng-table="ngtable.tableParams" class="table table-bordered table-striped">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>
</div>

這裡寫了些簡單的ng-table效果。
ui-bootstrap效果頁面

  <span uib-dropdown class="ng-cloak">
      <a href id="simple-dropdown" uib-dropdown-toggle>
          下拉框觸發
      </a>
      <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
          下拉框內容.這裡寫個效果證明實現動態載入即可
      </ul>
  </span>

這裡僅寫了個下拉框效果,證明正確載入並使用該插件。
好了,看完了html,我們看下載入配置和路由配置

"use strict"
var tempApp = angular.module("templateApp",["ui.router","oc.lazyLoad"])
.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",
                function($provide,$compileProvider,$controllerProvider,$filterProvider){
                    tempApp.controller = $controllerProvider.register;
                    tempApp.directive = $compileProvider.directive;
                    tempApp.filter = $filterProvider.register;
                    tempApp.factory = $provide.factory;
                    tempApp.service  =$provide.service;
                    tempApp.constant = $provide.constant;
                }]);

以上代碼對模塊的註冊,僅僅依賴了ui.router和oc.LazyLoad。配置也只是簡單配置了模塊,以便在後面的js能識別到tempApp上的方法。
然後我們再看看ocLazyLoad載入模塊的配置

"use strict"
tempApp
.constant("Modules_Config",[
    {
        name:"ngTable",
        module:true,
        files:[
            "Scripts/ng-table/dist/ng-table.min.css",
            "Scripts/ng-table/dist/ng-table.min.js"
        ]
    },
    {
        name:"ui.bootstrap",
        module:true,
        files:[
            "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
        ]
    },
    {
        name:"treeControl",
        module:true,
        files:[
            "Scripts/angular-tree-control-master/css/tree-control.css",
            "Scripts/angular-tree-control-master/css/tree-control-attribute.css",
            "Scripts/angular-tree-control-master/angular-tree-control.js"
        ]
    }
])
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
    $ocLazyLoadProvider.config({
        debug:false,
        events:false,
        modules:Modules_Config
    });
};

路由的配置

"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/default");
    $stateProvider
    .state("default",{
        url:"/default",
        templateUrl:"views/default.html",
        controller:"defaultCtrl",
        controllerAs:"default",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("js/controllers/default.js");
            }]
        } 
    })
    .state("uibootstrap",{
        url:"/uibootstrap",
        templateUrl:"views/ui-bootstrap.html",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("ui.bootstrap");
            }]
        } 
    })
    .state("ngtable",{
        url:"/ngtable",
        templateUrl:"views/ng-table.html",
        controller:"ngTableCtrl",
        controllerAs:"ngtable",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("ngTable").then(
                    function(){
                        return $ocLazyLoad.load("js/controllers/ng-table.js");
                    }
                );
            }]
        } 
    })
    .state("ngtree",{
        url:"/ngtree",
        templateUrl:"views/angular-tree-control.html",
        controller:"ngTreeCtrl",
        controllerAs:"ngtree",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("treeControl").then(
                    function(){
                        return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
                    }
                );
            }]
        } 
    })
};

ui-bootstrap的下拉框簡單的實現不需要控制器,那麼我們就只看看ng-table和angular-tree-control的控制器js吧:
ng-table.js

(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
    var vm = this;
    //數據
    var data = [{ name: "Moroni", age: 50 },
                 { name: "Tiancum ", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 }];
    vm.tableParams = new NgTableParams(    // 合併預設的配置和url參數
        angular.extend({
            page: 1,            // 第一頁
            count: 10,          // 每頁的數據量
            sorting: {
                name: 'asc'     // 預設排序
            }
        },
        $location.search())
        ,{
            total: data.length, // 數據總數
            getData: function ($defer, params) {
                $location.search(params.url()); // 將參數放到url上,實現刷新頁面不會跳回第一頁和預設配置
                var orderedData = params.sorting ?
                        $filter('orderBy')(data, params.orderBy()) :data;
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        }
    );
};
})();

angular-tree-control.js

(function(){
"use strict"
tempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
    var vm = this;
    //樹數據
    vm.treeData = [
                {
                    id:"1",
                    title:"標簽1",
                    childList:[
                        {
                            id:"1-1",
                            title:"子級1",
                            childList:[
                                {
                                    id:"1-1-1",
                                    title:"再子級1",
                                    childList:[]
                                }
                            ]
                        },
                        {
                            id:"1-2",
                            title:"子級2",
                            childList:[
                                {
                                    id:"1-2-1",
                                    title:"再子級2",
                                    childList:[
                                        {
                                            id:"1-2-1-1",
                                            title:"再再子級1",
                                            childList:[]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            id:"1-3",
                            title:"子級3",
                            childList:[]
                        }
                    ]
                },
                {
                    id:"2",
                    title:"標簽2",
                    childList:[
                        {
                            id:"2-1",
                            title:"子級1",
                            childList:[]
                        },
                        {
                            id:"2-2",
                            title:"子級2",
                            childList:[]
                        },
                        {
                            id:"2-3",
                            title:"子級3",
                            childList:[]
                        }
                    ]}
                ,
                {
                    id:"3",
                    title:"標簽3",
                    childList:[
                        {
                            id:"3-1",
                            title:"子級1",
                            childList:[]
                        },
                        {
                            id:"3-2",
                            title:"子級2",
                            childList:[]
                        },
                        {
                            id:"3-3",
                            title:"子級3",
                            childList:[]
                        }
                    ]
                }
            ];
    //樹配置
    vm.treeOptions = {
      nodeChildren:"childList",
        dirSelectable:false
    };
};
})();

讓我們忽略default.js吧,畢竟裡面只有個"Hello Wrold"。

github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo

本獸的相關文章AngularJs ui-router 路由的簡單介紹  野獸的 Angular 學習 - - ngRoute Angular自帶的路由


您的分享是我們最大的動力!

更多相關文章
  • 首先還是先感謝github,感謝github上提供此段源碼的作者。跟昨晚看的靜態文件伺服器來比今天的靜態文件伺服器稍微複雜些,可以學到很多新的東西。仔細會發現這次的代碼多了一個fs.stat函數和ReadStream對象的pipe函數,stat這個函數是用來獲取文件信息。第一個參數是傳入文件路徑,第...
  • 有兩種方式可以實現input的只讀效果:disabled 和 readonly。自然兩種出來的效果都是只能讀取不能編輯,可是兩者有很大不同。Disabled說明該input無效,及其value不會傳遞給任何程式,比如asp、php等。Readonly僅僅是無法編輯,不影響其值的傳遞。Disabled...
  • jQuery除了包含原生JS中的內置數據類型(built-in datatype),還包括一些擴展的數據類型(virtual types),如Selectors、Events等。1. String String最常見,幾乎任何一門高級編程語言和腳本語言中都支持,比如"Hello world!"即字元...
  • 在實際的開發過程中,前端後臺協商好了統一的介面,就各自開始自己的任務了。這時候我有這麼一個 Ajax 請求需要從後臺獲取數據:$.ajax({ url: '/products/'}).done(function(res) { $('#result').html(res);});但是這個服務可能還.....
  • 各種瀏覽器之間的競爭的白熱化意味著越來越多的人現在開始使用那些支持最新、最先進的W3C Web標準的設備,以一種更具交互性的方式來訪問互聯網。這意味著我們終於能夠利用更強大更靈活的CSS來創造更簡潔,更好維護的瀏覽器前端代碼。現在讓我們來看一看一些也許你還不知道的讓人興奮的CSS 功能。 在CSS....

一周排行
  • EventBus主要是幹嘛使的,直接翻譯叫事件匯流排。 是觀察者模型的實現,利用它你既可以實現觀察者模型的業務場景,還可以基於它的事件驅動機制來實現應用程式內組件之間的解耦與通信。 我們來看看有EventBus的匯流排結構圖,如下: Rafy中的EventBus使用入口是基於上圖中Composer組件組 ...
  • 部署單體應用程式意味著運行一個或多個相同副本的單個較大的應用程式。您通常會在每個伺服器上配置 N 個伺服器(物理或虛擬)並運行 M 個應用程式實例。單體應用程式的部署並不總是非常簡單,但它比部署微服務應用程式要簡單得多。 ...
  • 作為我的處子隨筆,我就憑著我所想到的記錄一下這段時間探索我所做的這個Feature的歷程以及所學,所感. 先說一下背景,Provisiong一直是我們COM組項目里比較重要的配置環節,誕生10來年,一直是Java Swing作為主要的GUI界面,配合後臺的OMCP Server 與網元以及資料庫打交 ...
  • 在官網上下載了lombok.jar包以後,有兩種安裝方式 : 1. 雙擊下載下來的 JAR 包安裝 lombok 我選擇這種方式安裝的時候提示沒有發現任何 IDE,所以我沒安裝成功,我是手動安裝的。如果你想以這種方式安裝,請參考官網的視頻。2.eclipse / myeclipse 手動安裝 lom ...
  • 一、類載入器 類載入器(ClassLoader),顧名思義,即載入類的東西。在我們使用一個類之前,JVM需要先將該類的位元組碼文件(.class文件)從磁碟、網路或其他來源載入到記憶體中,並對位元組碼進行解析生成對應的Class對象,這就是類載入器的功能。我們可以利用類載入器,實現類的動態載入。 二、類的 ...
  • 1.什麼是UML? 面對日益複雜的軟體需求的挑戰,面向過程的開發已經不能再滿足,面向對象的開發模式應運而生,隨即出現瞭如 java ,c++等面向對象編程的語言。對於軟體的開發也有了新的思維——面向對象建模。在此理論以及實踐的基礎上,UML誕生了,其作用就是將使用面向對象模型開發軟體的思維方法,以及 ...
  • 【那座山,正當頂上,有一塊仙石。其石有三丈六尺五寸高,有二丈四尺圍圓。三丈六尺五寸高,按周天三百六十五度;二丈四尺圍圓,按政歷二十四氣。上有九竅八孔,按九宮八卦。四面更無樹木遮陰,左右倒有芝蘭相襯。蓋自開闢以來,每受天真地秀,日精月華,感之既久,遂有靈通之意。內育仙胞,一日迸裂,產一石卵,似圓球樣大 ...
  • 1.什麼是用例? 用例模型主要應用在工程開發的初期進行系統需求分析階段,描述了系統具備什麼功能,也就是說從用戶的角度觀察系統應該支持哪些功能,同時幫助系統分析員對系統功能有個全面的認識,從巨集觀上描述系統的行為。 用例模型包括的基本元素有:用例,角色,系統。 2用例的作用 一個系統中可以包含多個用例, ...
  • 如果準備工作: 1.Python 2.Django 3.Git 安裝Python: 官網下載 安裝Django: 現在正式開始創建一個名為my_blog的Django項目: 建立Django app(article): 到目前為止的項目結構如下: 併在my_blog/my_blog/setting. ...
  • 標題示例: 標題一 標題二 標題三 標題四 標題五 標題六 連接示例: " " "github" 無序列表示例: 1 2 3 4 代碼示例: 1、一行代碼用``包含 2、多行代碼用一對 { "code":1, "message":"成功", "object":{ }, "map":{}, "hand ...