欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs 動態(tài)加載模塊和依賴

 更新時間：2016年09月15日 14:18:37   作者：野獸''  
這篇文章主要介紹了AngularJs 動態(tài)加載模塊和依賴方法的相關資料,需要的朋友可以參考下

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

為了實現(xiàn)這篇學習筆記知識點的效果，我們需要用到：

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沒做嵌套路由，只是簡單實現(xiàn)單視圖的路由以展示效果。

我們來看主頁面的代碼：

<!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>

這里我們只是用來證明加載并正確執(zhí)行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>
     下拉框觸發(fā)
   </a>
   <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
     下拉框內容.這里寫個效果證明實現(xiàn)動態(tài)加載即可
   </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的下拉框簡單的實現(xiàn)不需要控制器，那么我們就只看看ng-table和angular-tree-control的控制器js吧：

ng-table.js

(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
  //數(shù)據(jù)
  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 }];
  this.tableParams = new NgTableParams(  // 合并默認的配置和url參數(shù)
    angular.extend({
      page: 1,      // 第一頁
      count: 10,     // 每頁的數(shù)據(jù)量
      sorting: {
        name: 'asc'   // 默認排序
      }
    },
    $location.search())
    ,{
      total: data.length, // 數(shù)據(jù)總數(shù)
      getData: function ($defer, params) {
        $location.search(params.url()); // 將參數(shù)放到url上，實現(xiàn)刷新頁面不會跳回第一頁和默認配置
        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(){
  //樹數(shù)據(jù)
  this.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:[]
            }
          ]
        }
      ];
  //樹配置
  this.treeOptions = {
    nodeChildren:"childList",
    dirSelectable:false
  };
};
})();

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

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

以上就是對AngularJS 動態(tài)加載模塊和依賴的資料整理，后續(xù)繼續(xù)補充相關資料，謝謝大家對本站的支持！

相關文章

最新評論