好了,现进入正题,在 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. 【转】XPath 示例

    XPath 示例   其他版本   本主题回顾整个 XPath 参考中出现的语法示例. 所有示例均基于 XPath 语法的示例 XML 文件 (inventory.xml). 有关在测试文件中使用 X ...

  2. linux-菜鸟新手命令(1)

    1. ls命令 ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. root@tecmint:~#ls Andro ...

  3. MATLAB【工具箱下载】汇总

    至于工具箱的安装说明参见:http://www.matlabsky.com/thread-120-1-1.html Maplesoft<Maple Toolbox for MATLAB>  ...

  4. (转)PHP zval内存回收机制和refcount_gc和is_ref_gc

    出处 : http://blog.sina.com.cn/s/blog_75a2f94f0101gygh.html 对于PHP这种需要同时处理多个请求的程序来说,申请和释放内存的时候应该慎之又慎,一不 ...

  5. 【Android-UI】包含多个子View时触发父节点的焦点事件

    今天遇到个问题: 在 LinearLayout 中添加了好几个其他视图 View 之后,点击时不能获得焦点,导致绑定的 onClick 事件不能触发. 解决办法: 对 LinearLayout 添加属 ...

  6. 一道js题

    <script> var a = 5; function test(){ this.a = 10; a = 15 this.func = function(){ var a = 20 ; ...

  7. Python内置函数(20)——hex

    英文文档: hex(x) Convert an integer number to a lowercase hexadecimal string prefixed with "0x" ...

  8. 记录一次大量CLOSE_WAIT的情况

    近期的项目中,有一个特殊的需求,对于每个客户端程序有若干个机构,对于每个机构有不同的客户端证书,程序间隔一段时间向服务端进行请求,根据请求的成功与否更新各机构的状态(如正常,证书未配置,证书过期等). ...

  9. 设计模式 策略模式2 c++11

    根据需求的不同 选择不同的策略算法 之前是保存的各种策略类的指针 这里直接使用 function  bind 选择对应的算法 代码 // 005.cpp: 定义控制台应用程序的入口点. // #inc ...

  10. hdu 1213 求连通分量(并查集模板题)

    求连通分量 Sample Input2 //T5 3 //n m1 2// u v2 34 5 5 12 5 Sample Output24 # include <iostream> # ...