详解AngularJS通过ocLazyLoad实现动态(懒)加载模块
网络编程 2021-07-04 19:20www.168986.cn编程入门
本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载。通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文件,比如是相关的controller,就是js,这样有利于提高首次加载的负担。
狼蚁网站SEO优化就是一个懒加载的实现过程。
实现的过程主要是引用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", "$pileProvider", "$controllerProvider", "$filterProvider", function ($provide, $pileProvider, $controllerProvider, $filterProvider) { app.controller = $controllerProvider.register; app.directive = $pileProvider.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" ]<br>}]); 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. on 2016/6/24. */ (function () { "use strict" app.controller("mainCtrl", mainCtrlFn); function mainCtrlFn() { this.value = "Hello World"; } }())
adminUser.js
/** * adminUserCtrlFn * Created by pkcms. on 2016/6/24. */ (function () { app.controller('adminUserCtrl',adminUserCtrlFn); function adminUserCtrlFn() { this.value = "wele to admin user"; } }());
demo下载:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:性能优化之代码优化页面加载速度
下一篇:Javascript仿京东放大镜的效果
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程