AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本。

实现的过程主要是引用3个主要的JS文件

  1. <script src="angular/1.4.8/angular/angular.min.js"></script>
  2. <script src="angular/ui-router/release/angular-ui-router.min.js"></script>
  3. <script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>

然后通过 APP 配置,将依赖的脚本进行注入操作

  1. var app = angular.module(‘pkcms‘, ["ui.router", "oc.lazyLoad"]);
  2. app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
  3. function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
  4. app.controller = $controllerProvider.register;
  5. app.directive = $compileProvider.directive;
  6. app.filter = $filterProvider.register;
  7. app.factory = $provide.factory;
  8. app.service = $provide.service;
  9. app.constant = $provide.constant;
  10. }]);
  11. // 按模块化加载其他的脚本文件
  12. app.constant(‘Modules_Config‘, [
  13. {
  14. name: ‘treeControl‘,
  15. serie: true,
  16. files: [
  17. "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
  18. ]
  19. }
  20. ]);
  21. app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
  22. function routeFn($ocLazyLoadProvider,Modules_Config){
  23. $ocLazyLoadProvider.config({
  24. debug:false,
  25. events:false,
  26. modules:Modules_Config
  27. });
  28. };

以上是初始化动态加载的配置过程。

接着是建立路由

  1. "use strict"
  2. app.config(["$stateProvider","$urlRouterProvider",routeFn]);
  3. function routeFn($stateProvider,$urlRouterProvider){
  4. $urlRouterProvider.otherwise("/main");
  5. $stateProvider
  6. .state("main",{
  7. url:"/main",
  8. templateUrl:"views/main.html",
  9. controller:"mainCtrl",
  10. controllerAs:"main",
  11. resolve:{
  12. deps:["$ocLazyLoad",function($ocLazyLoad){
  13. return $ocLazyLoad.load("controllers/main.js");
  14. }]
  15. }
  16. })
  17. .state("adminUser",{
  18. url:"/adminUser",
  19. templateUrl:"views/adminUser.html",
  20. controller:"adminUserCtrl",
  21. controllerAs:"adminUser",
  22. resolve:{
  23. deps:["$ocLazyLoad",function($ocLazyLoad){
  24. return $ocLazyLoad.load("controllers/adminUser.js");
  25. }]
  26. }
  27. })
  28. };

最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
main.html

  1. <div>
  2. {{main.value}}
  3. </div>

adminUser.html

  1. <div>
  2. {{adminUser.value}}
  3. </div>

main.js

  1. /**
  2. * mainCtrl
  3. * Created by pkcms.cn on 2016/6/24.
  4. */
  5. (function () {
  6. "use strict"
  7. app.controller("mainCtrl", mainCtrlFn);
  8. function mainCtrlFn() {
  9. this.value = "Hello World";
  10. }
  11. }())

adminUser.js

  1. /**
  2. * adminUserCtrlFn
  3. * Created by pkcms.cn on 2016/6/24.
  4. */
  5. (function () {
  6. app.controller(‘adminUserCtrl‘,adminUserCtrlFn);
  7. function adminUserCtrlFn() {
  8. this.value = "welcome to admin user";
  9. }
  10. }());

github url :https://github.com/366065186/angularjs-oclazyload

转载请注明:PKCMS博客 » AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

时间: 2024-10-10 08:34:30

AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖的相关文章

nginx php动态编译加载模块.

#Nginx动态编译加载模块步骤 #查看目前Nginx版本及编译模块 #[[email protected] ~]# /opt/app/lnmp/nginx-1.12.0/sbin/nginx -V #nginx version: nginx/1.12.0 #built by gcc 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC) #built with OpenSSL 1.0.2k  26 Jan 2017 #TLS SNI support enabled #c

AngularJs 动态加载模块和依赖注入

最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方的学习笔记,不过觉得按需加载模块并且成功使用这个确实是个好处,还是记录下来吧.基于本兽没怎么深入的使用requireJs,所以本兽不知道这个和requireJs有什么区别,也不能清晰的说明这到底算不算Angular的按需加载. 为了实现这篇学习笔记知识点的效果,我们需要用到: angular:https://g

深入懒加载

[javascript] view plain copy 懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 懒加载多用于图片,因为它属于流量的大头.最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上src属性. 公司内部库的懒加载正是采用这种方案.它会遍历页面中所有的图片,将其src缓存起来后删除图片的src属

进一步优化SPA的首屏打开速度(模块化与懒加载) by 嗡

前言 单页应用的好处在于一次载入所有页面资源,利用本地计算能力渲染页面,提高页面切换速度与用户体验.但缺点在于所有页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时候需要的载入时间较长. 在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩.混淆.开启gzip传输后,我们成功将3.5兆的资源包压缩到350k.但是如果SPA应用的页面数进一步增加,100个甚至1000个页面的时候,还是无法避免巨大的首页资源包加载的问题.所以350k的资源包是否还

ionic3 懒加载在微信上缓存的问题

1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.module.ts混乱,不美观,不易维护,不适用于结构繁多.业务复杂的项目. 懒加载的出现,使得在跳转到对应页面的时候加载对应页面的js.css.html,这样每个页面都是一个模块,只有在需要的时候才会加载,大大缓解了首屏的压力. 2.懒加载的使用: https://ionicframework.com/d

angular路由懒加载

创建模块的方法 ng generate module 模块名称 --routing 例如: ng generate module admin --routing ng generate module auth --routing 使用懒加载的方法 1.在app.module.ts中调用懒加载 // 懒加载模块 { path:"login", loadChildren:()=>import('./auth/auth.module').then(mod=>mod.AuthMod

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

angular懒加载的一些坑

写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

页面图片懒加载

一.页面滚动加载图片的理解 当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路 当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张