AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2016-06-24 15:04
816 查看
最近一直在学习 AngularJs 的实践过程中,之前虽然也在学,但总因为工作方面的各种原因一直是断断续续的,虽然之前也一直看但总找不到入手的感觉,可能是自己的心太高想着一下子就能掌握,还有一个原因是之前用习惯了 JQUERY 的模式,在 AngularJs 下不太适应所以在学习过程中就遇到许多问题,就像今天解决的动态加载问题,在 AngularJs 常规的教程书籍中很少有提到,有的甚至都没有,都是用常规的一次性的加载方式,这种方式只适合用在教学和小型项目中,在中大型项目中不推荐使用,最好是使用动态(懒)加载的方式。这种方式的好处就不用说有经验的程序员都知道。
今天是下了决心把这个问题给解决了,这个解决的过程还得感谢我之前的一位做前端的同事,他比我早学习 AngularJs。虽然他在自己的博客上也记录,但他上面的记录含有一些 C#语言的元素在里面会有看不明白的情况,我这里直接用纯前端语言做下整理。
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本。
实现的过程主要是引用3个主要的JS文件
<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>
然后通过 APP 配置,将依赖的脚本进行注入操作
var app = angular.module('pkcms', ["ui.router", "oc.lazyLoad"]);
app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
function ($provide, $compileProvider, $controll
4000
erProvider, $filterProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
}]);
// 按模块化加载其他的脚本文件
app.constant('Modules_Config', [
{
name: 'treeControl',
serie: true,
files: [
"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
]
}
]);
app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
debug:false,
events:false,
modules:Modules_Config
});
};
以上是初始化动态加载的配置过程。
接着是建立路由
"use strict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/main");
$stateProvider
.state("main",{
url:"/main",
templateUrl:"views/main.html",
controller:"mainCtrl",
controllerAs:"main",
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("controllers/main.js");
}]
}
})
.state("adminUser",{
url:"/adminUser",
templateUrl:"views/adminUser.html",
controller:"adminUserCtrl",
controllerAs:"adminUser",
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("controllers/adminUser.js");
}]
}
})
};
最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
main.html
<div>
{{main.value}}
</div>
adminUser.html
<div>
{{adminUser.value}}
</div>
main.js
/**
* mainCtrl
* Created by pkcms.cn on 2016/6/24.
*/
(function () {
"use strict"
app.controller("mainCtrl", mainCtrlFn);
function mainCtrlFn() {
this.value = "Hello World";
}
}())
adminUser.js
/**
* adminUserCtrlFn
* Created by pkcms.cn on 2016/6/24.
*/
(function () {
app.controller('adminUserCtrl',adminUserCtrlFn);
function adminUserCtrlFn() {
this.value = "welcome to admin user";
}
}());
github url :https://github.com/366065186/angularjs-oclazyload
转载请注明:PKCMS博客 » AngularJs
通过 ocLazyLoad 实现动态(懒)加载模块和依赖
今天是下了决心把这个问题给解决了,这个解决的过程还得感谢我之前的一位做前端的同事,他比我早学习 AngularJs。虽然他在自己的博客上也记录,但他上面的记录含有一些 C#语言的元素在里面会有看不明白的情况,我这里直接用纯前端语言做下整理。
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本。
实现的过程主要是引用3个主要的JS文件
<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>
然后通过 APP 配置,将依赖的脚本进行注入操作
var app = angular.module('pkcms', ["ui.router", "oc.lazyLoad"]);
app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
function ($provide, $compileProvider, $controll
4000
erProvider, $filterProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
}]);
// 按模块化加载其他的脚本文件
app.constant('Modules_Config', [
{
name: 'treeControl',
serie: true,
files: [
"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
]
}
]);
app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
debug:false,
events:false,
modules:Modules_Config
});
};
以上是初始化动态加载的配置过程。
接着是建立路由
"use strict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/main");
$stateProvider
.state("main",{
url:"/main",
templateUrl:"views/main.html",
controller:"mainCtrl",
controllerAs:"main",
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("controllers/main.js");
}]
}
})
.state("adminUser",{
url:"/adminUser",
templateUrl:"views/adminUser.html",
controller:"adminUserCtrl",
controllerAs:"adminUser",
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("controllers/adminUser.js");
}]
}
})
};
最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
main.html
<div>
{{main.value}}
</div>
adminUser.html
<div>
{{adminUser.value}}
</div>
main.js
/**
* mainCtrl
* Created by pkcms.cn on 2016/6/24.
*/
(function () {
"use strict"
app.controller("mainCtrl", mainCtrlFn);
function mainCtrlFn() {
this.value = "Hello World";
}
}())
adminUser.js
/**
* adminUserCtrlFn
* Created by pkcms.cn on 2016/6/24.
*/
(function () {
app.controller('adminUserCtrl',adminUserCtrlFn);
function adminUserCtrlFn() {
this.value = "welcome to admin user";
}
}());
github url :https://github.com/366065186/angularjs-oclazyload
转载请注明:PKCMS博客 » AngularJs
通过 ocLazyLoad 实现动态(懒)加载模块和依赖
相关文章推荐
- 动态加载JavaScript文件的两种方法
- javascript瀑布流式图片懒加载实例
- 理解Javascript文件动态加载
- javascript动态加载二
- 动态加载js、css的实例代码
- JavaScript 动态加载脚本和样式的方法
- AngularJS基础教程之简单介绍
- 动态加载jQuery的两种方法实例分析
- 一个简单的动态加载js和css的jquery代码
- jquery select动态加载选择(兼容各种浏览器)
- 使用jquery动态加载javascript以减少服务器压力
- AngularJS中处理多个promise的方式
- js 动态加载事件的几种方法总结
- javascript动态加载三
- ASP.net 动态加载控件时一些问题的总结
- 动态加载图片路径 保持JavaScript控件的相对独立性
- 多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页
- Android 中动态加载.jar的实现步骤
- 实例讲解动态加载gridview中的行及其样式
- javascript动态加载实现方法一