AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转
http://blog.csdn.net/zhangh8627/article/details/51752872
AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
最近一直在学习 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, $controllerProvider, $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
AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转的更多相关文章
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...
- AngularJs 动态加载模块和依赖
最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...
- Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的U ...
- angular5给懒加载模块添加loading
在根组件的构造函数中直接执行: this.router.events.subscribe(event=>{ if(event instanceof RouteConfigLoadEnd) { t ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- webpack多页面开发与懒加载hash解决方案
之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景,如果是常规单页面应用的话,上篇文章提供的方案是没有问题的.但是前端项目复杂多变,应对复杂多页面项目时,我们不得不继续踩w ...
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...
- 18-Angular 自定义模块以及配置路由模块懒加载
新建项目,新建几个子模块,实现懒加载 用户.商品.文章 新建这三个模块 创建模块的时候后面加 --routing.会自动生成模块的路由文件 先删掉. 重新创建模块带routing 这样就会生成两个文件 ...
- ionic3 懒加载在微信上缓存的问题
1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.modu ...
随机推荐
- C#可扩展编程之MEF
C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻 前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在 ...
- 简话ASP.NET Web API
简话ASP.NET Web API 在vs2012中,我们很容易在根据选择的ASP.NET MVC Web应用程序来新建一个Web API应用,聪明的你一定想见得到,Web API和MVC有着某种联系 ...
- sql分组合并字段重复项sql for xml path
-------------------------(情景描述) 在我们处理数据时,可能会碰到这种情景: Id Name 1 a,b 2 ...
- mac下安装配置java jdk,maven,resin
mac jdk安装及环境变量配置 安装http://www.ifunmac.com/2013/04/mac-jdk-7/ jdk安装目录:/Library/Java/JavaVirtualMachin ...
- MVC 5 - 查询Details和Delete方法
MVC 5 - 查询Details和Delete方法 在这部分教程中,接下来我们将讨论自动生成的Details和Delete方法. 查询Details和Delete方法 打开Movie控制器并查看De ...
- 在 Ubuntu 12.04 上通过 Tomcat 部署 Solr 4
http://www.oschina.net/question/12_71342 可行
- MongoDB应用介绍之前
MongoDb企业应用实战(一) 写在MongoDB应用介绍之前 故事背景: 本人有幸,经老友( 现为x知名快递公司技术总监 ) 推荐进入中国前三大民营快递公司之一工作,在此非常感谢他,在此也非常 ...
- [转]Disabling ASLR on individual iOS applications when using iOS 6.0.1
ASLR: Address Space Layout Randomization 查看应用是否进行了 ASLR 保护的方法:otool -hv ${File-Path} I recently enco ...
- Pygame制作微信打飞机游戏PC版
使用Pygame制作微信打飞机游戏PC版 转至:http://www.cnblogs.com/dukeleo/p/3339780.html 前一阵子看了一篇文章:青少年如何使用Python开始游戏 ...
- 长度为n的数组,有一个数重复出现了n/2+1次,找出(三种方法)
问题: 长度为n的数组,有一个数重复出现了n/2+1次,找出这个数: 解决: 比较直接的思路是遍历每个元素,让其与剩下其他元素比较,相等一次计数器sum++,直到sum=n/2+1为止: #inc ...