好了,现进入正题,在 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 实现动态(懒)加载模块和依赖

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

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

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  2. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  3. Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的U ...

  4. angular5给懒加载模块添加loading

    在根组件的构造函数中直接执行: this.router.events.subscribe(event=>{ if(event instanceof RouteConfigLoadEnd) { t ...

  5. webpack多页面开发与懒加载hash解决方案

    之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景,如果是常规单页面应用的话,上篇文章提供的方案是没有问题的.但是前端项目复杂多变,应对复杂多页面项目时,我们不得不继续踩w ...

  6. 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载

    当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...

  7. 18-Angular 自定义模块以及配置路由模块懒加载

    新建项目,新建几个子模块,实现懒加载 用户.商品.文章 新建这三个模块 创建模块的时候后面加 --routing.会自动生成模块的路由文件 先删掉. 重新创建模块带routing 这样就会生成两个文件 ...

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

    1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.modu ...

  9. Spring提前加载与懒加载

    首先,Spring默认是提前加载,这意味着当项目启动,spring初始化,spring会把所有的扫描包下的 ,所有带spring 注解(@Component.@Repository.@Service. ...

随机推荐

  1. C++随笔:.NET CoreCLR之corleCLR核心探索之coreconsole(2)

    这篇文章是上篇的续集,本文将会继续介绍coreconsole.cpp里面的逻辑.也许大家会看一些CLR的书,我承认我没有看过,因为我觉得一个人,他再NB,那也是他自己的眼光,而且说句难听的,CLR也不 ...

  2. Android 图标添加消息提醒

    实现方法: 1. 在对应的布局放置TextView或者ImageView. 2. 用Canvas在原来Icon的bitmap基础上进行绘制 3. 利用开源项目ViewBadger进行添加,很方便,而且 ...

  3. JVM学习总结二——垃圾回收算法

    昨天总结了JVM内存分区相关的知识,这次我们将来了解下JVM的另一个核心知识点——垃圾回收算法.这一部分其实并不太难,如果对操作系统的内存处理算法有所了解,那么这部分算法其实只看名字就能明白,两者在原 ...

  4. PHP5.4最新特性

     PHP5.4最新特性   官网:ChangeLog-5.php#5.4.0 原文Oracle:LAMP 体系有了新的竞争,但此版本中的特性使 PHP 再次挑战极限. 稍微做了修改.: 概述总结:1. ...

  5. D3D渲染流程--转载

    http://www.cnblogs.com/ixnehc/articles/1282350.html 先从最基础的写起吧,关于Device的渲染流程. D3D9的Device就是D3D给我们提供的一 ...

  6. Quartz.NET 2.0 作业调度框架使用

    Quartz.NET是一个开源的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不 ...

  7. Python3 多线程编程(thread、threading模块)

    threading是对thread的封装. 1.开启线程: t=threading.Thread(target=sayhi,args=('hh',)) t.start() 或者先建一个Thread的继 ...

  8. Django模型层(2)

    <!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...

  9. MySQL 服务正在启动 .MySQL 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。

    MySQL 服务正在启动 .MySQL 服务无法启动.系统出错.发生系统错误 1067.进程意外终止. 检查了一个晚上才发现是---配置问题 #Path to installation directo ...

  10. docker 初始化执行.sh修改.properties文件

    1.testmysql.properties rootuser=aarootpass=bb 2.用环境变量修改testmysql.properties里面的rootuser和rootpass的值的脚本 ...