相思资源网 Design By www.200059.com
废话不多说，进入正题...
首先我们看下文件结构：
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没做嵌套路由，只是简单实现单视图的路由以展示效果。
我们来看主页面的代码：
<html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" /> <script src="/UploadFiles/2021-04-02/angular.js">在这个页面，我们只加载了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.register; 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","$locationProvider",routeFn]); function routeFn($stateProvider,$urlRouterProvider,$locationProvider){ $urlRouterProvider.otherwise("/default"); $stateProvider .state("default",{ url:"/default", views:{ "":{ templateUrl:"views/default.html", controller:"defaultCtrl", controllerAs:"default" } }, resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("js/controllers/default.js"); }] } }) .state("uibootstrap",{ url:"/uibootstrap", views:{ "":{ templateUrl:"views/ui-bootstrap.html" } }, resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("ui.bootstrap"); }] } }) .state("ngtable",{ url:"/ngtable", views:{ "":{ 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", views:{ "":{ 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 "htmlcode">(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"。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无AngularJs动态加载模块和依赖注入详解的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。