AngularJs 动态加载模块和依赖
最近项目比较忙额，白天要上班，晚上回来还需要做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 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参数
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(){
//树数据
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 ui-router 路由的简单介绍 Angular 学习 -- ngRoute Angular自带的路由
AngularJs 动态加载模块和依赖的更多相关文章
- AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...
- AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖-转
http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签: ...
- OrchardCore 如何动态加载模块？
前言 今天,我们再次讨论下OrchardCore,通过初期调研,我们项目采用OrchardCore底层设施支持模块化,同时根据业务场景,额外还需支持二次开发,于是有了本文,若有不同解决方案,欢迎留言探 ...
- 黄聪：AngularJS 动态加载控制器实例-ocLoazLazy
一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...
- stevedore动态加载模块
stevedore动态加载模块,stevedore使用setuptools的entry points来定义并加载插件.entry point引用的是定义在模块中的对象,比如类.函数.实例等,只要在im ...
- Python_getattr+__import__ 实现动态加载模块、类对象或函数
__import__() 语法 __import__(name[, globals[, locals[, fromlist[, level]]]]) 参数 name -- 字符串,模块的导入路径 说明 ...
- [driver]linux内核动态加载模块
问题: 1. 把编译好的模块放到板子/lib/modules对应文件夹下,并且执行了depmod -a, 比如pl2303.ko, 那么下一次插入pl2303的串口线,是否可以识别,也就是自动加载pl ...
- angular-ui-router动态加载模块
1.定义index.html主页,对于通用的js就不用require依赖加载了,其中main.js作为主模块,用require添加系统路由模块. <!DOCTYPE html> <h ...
- angularjs 动态加载事件的另一种实现
/** 初始化酒店列表 */ function inintHotel(params,url,$http,$scope){ $http.jsonp(url).success(function(res, ...
随机推荐
- tomcat -ROOT 与webapps 的关系，关于部署的一些问题
现象:之前遇到很奇怪的问题,发完版之后没有效果,页面还是读取上一版的. 反复查找原因发现 http://localhost:8080/mobie 这个路径下的页面是正常的, 而 http://lo ...
- 安卓手机USB网络共享，电脑卡顿、反应慢
1.首先需要把手机连接到电脑,在手机上打开USB网络共享. 2.打开设备管理器 3.在网络适配器中,找到Remote NDIS based Internet Sharing Device,右键更新驱动 ...
- Spring MVC篇一、搭建Spring MVC框架
本项目旨在搭建一个简单的Spring MVC框架,了解Spring MVC的基础配置等内容. 一.项目结构 本项目使用idea intellij创建,配合maven管理.整体的目录结构如图: 其中ja ...
- 响应式web网站设计制作方法
在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论.总结下来,响应式比之前想象的要复杂得多.1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式 ...
- homework-01
我的GitHub账户名是Firedamp. 其实我最一开始看到最大子序列的和这个题目,最先想到的就是最简单的O(n^3)的算法,在课堂上教的也确实是这个程序,但是这种算法的时间复杂度必然是最高的,在数 ...
- call和bind改变的上下文环境
这周自我学习的时间很宽裕.正巧一直对call和apply不甚理解(虽然bind还经常用到,仅仅是知道这么用有这个效果= =,而不知为何有这个效果),下午就自己写写demo,帮助自己理解. functi ...
- 代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载
Sublime Text这款代码编辑器是Jeff 一直都在使用的,前段时间转用到版本3,因为感觉Sublime Text 3 启动速度更加快,运行更加流畅——虽然3 还是在Beta 阶段.下面就直接分 ...
- android——自定义listView
都知道微信主机面 有个界面会一行一一行的聊天记录,那个效果就可以用listview来实现(当然这只是其中的一种) listView是一种比较常见的组件它用来展示列的view,它是根据数据的长度来显示数 ...
- 【三】用Markdown写blog的常用操作
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- eclipse配置javah命令
1.找到javah命令所在的目录 我的为 /usr/bin/javah 2.打开eclipse 如图点击第二项 3.配置 如图 ${project_loc}/src -classpat ...