angularJS+requireJS实现controller及directive的按需加载

最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果;思路如下,1、借助ui-router里面的resolve属性来实现预加载,2、需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令,3、需要借助$q来帮助我们实现异步加载,具体步骤如下所示;

1、在我们定义的app(在定义app.config()的js文件内)模块上挂载注册控制器和指令的属性,如下所示 

app.register = {
    //注意这里的$controllerProvider是内置注册控制器的属性,$compileProvider是内置的注册指令的属性controller: $controllerProvider.register,directive: $compileProvider.directive}

 

2、借助$q定义一个异步加载js文件的方法(在定义路由的js文件内)

app.loadMyJs = function(js){return function($rootScope, $q){var deffer = $q.defer(),deps=[];angular.isArray(js) ? (deps = js) : deps.push(js);require(deps,function(){$rootScope.$apply(function(){deffer.resolve();});});return deffer.promise;};}

3、借助路由里面的resolve属性,进行配置需要加载的控制器文件及指令文件(在定义路由的js文件内)

.state('view1',{url: '/view1',templateUrl: 'temp/partial1.html',controller: 'MyCtrl1',resolve:{
          //需要动态加载的控制器及指令js文件,其它js文件以此类推deps:app.loadMyJs([
'./controllers/my-ctrl-1','./directives/loading'])}})

4、通过第一步先挂载在app上的属性来进行动态注册控制器or指令

//注册控制器(对应的控制器js文件内)
app.register.controller('MyCtrl1', function ($scope,$css,$rootScope) {//控制器里面的内容 });
//注册指令(对应的指令js文件内)

app.register.directive("loading",function (){

    return {
      restrict: "AE",
      replace: true,
      template: "<div class='mask' ng-show='isLoading'><span>loading</span></div>"
      }
    });  

如果有服务or过滤器需要按需加载也是类似的方法,另外如果是公共的服务,指令or过滤器等不需要进行按需加载的文件就可以使用普通的angular.module()的方式来定义即可;

最后这只是实现按需加载js文件中的一种思路,希望对您有所帮助。

 

转载于:https://www.cnblogs.com/ks-wang/p/6417692.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 字符设备驱动结构(四)—— file_operations 结构体知识解析

前面在 Linux 字符设备驱动开发基础 &#xff08;三&#xff09;—— 字符设备驱动结构&#xff08;中&#xff09; &#xff0c;我们已经介绍了两种重要的数据结构 struct inode{...}与 struct file{...} &#xff0c;下面来介绍另一个比较重要数据结构 struct _file_operatio…

Android开发群

为什么80%的码农都做不了架构师&#xff1f;>>> 我的自建Android应用开发群&#xff0c;欢迎大家来聊聊呀&#xff01;201427584 转载于:https://my.oschina.net/catia/blog/176384

Python的multiprocessing多进程

https://www.cnblogs.com/tkqasn/p/5701230.html 由于GIL的存在&#xff0c;python中的多线程其实并不是真正的多线程&#xff0c;如果想要充分地使用多核CPU的资源&#xff0c;在python中大部分情况需要使用多进程。Python提供了非常好用的多进程包multiprocessing&#xff0…

Linux 字符设备驱动结构(三)—— file、inode结构体及chardevs数组等相关知识解析

前面我们学习了字符设备结构体cdev Linux 字符设备驱动开发 &#xff08;一&#xff09;—— 字符设备驱动结构&#xff08;上&#xff09; 下面继续学习字符设备另外几个重要的数据结构。 先看下面这张图&#xff0c;这是Linux 中虚拟文件系统、一般的设备文件与设备驱动程序…

Python的gevent协程及协程概念

https://www.cnblogs.com/tkqasn/p/5705338.html 何为协程 协程&#xff0c;又称微线程。英文名Coroutine。 协程最大的优势就是协程极高的执行效率。因为子程序切换不是线程切换&#xff0c;而是由程序自身控制&#xff0c;因此&#xff0c;没有线程切换的开销&#xff0c;…

技术人生:三亚之行

人生收获 此次是公司组团去的三亚&#xff0c;地接的导游非常热情&#xff0c;如同大多数人一样&#xff0c;导游也会在这短短的几天内&#xff0c;尽可能的表现自己&#xff0c;此文聊聊导游说的三句话。 旅游三不“较”&#xff1a; 不比较不计较不睡觉人生何尝不是如此&…

Linux 字符设备驱动结构(二)—— 自动创建设备节点

上一篇我们介绍到创建设备文件的方法&#xff0c;利用cat /proc/devices查看申请到的设备名&#xff0c;设备号。 第一种是使用mknod手工创建&#xff1a;mknod filename type major minor 第二种是自动创建设备节点&#xff1a;利用udev&#xff08;mdev&#xff09;来实现设备…

Python数据库使用-SQLite

https://www.liaoxuefeng.com/wiki/897692888725344/926177394024864 SQLite是一种嵌入式数据库&#xff0c;它的数据库就是一个文件。由于SQLite本身是C写的&#xff0c;而且体积很小&#xff0c;所以&#xff0c;经常被集成到各种应用程序中&#xff0c;甚至在iOS和Android的…

Linux 字符设备驱动结构(一)—— cdev 结构体、设备号相关知识解析

一、字符设备基础知识 1、设备驱动分类 linux系统将设备分为3类&#xff1a;字符设备、块设备、网络设备。使用驱动程序&#xff1a; 字符设备&#xff1a;是指只能一个字节一个字节读写的设备&#xff0c;不能随机读取设备内存中的某一数据&#xff0c;读取数据需要按照先后数…

Python数据库使用MySQL

https://www.liaoxuefeng.com/wiki/897692888725344/932709047411488 MySQL是Web世界中使用最广泛的数据库服务器。SQLite的特点是轻量级、可嵌入&#xff0c;但不能承受高并发访问&#xff0c;适合桌面和移动应用。而MySQL是为服务器端设计的数据库&#xff0c;能承受高并发访…

Linux 驱动开发之内核模块开发(四)—— 符号表的导出

Linux内核头文件提供了一个方便的方法用来管理符号的对模块外部的可见性,因此减少了命名空间的污染(命名空间的名称可能会与内核其他地方定义的名称冲突),并且适当信息隐藏。 如果你的模块需要输出符号给其他模块使用,应当使用下面的宏定义: EXPORT_SYMBOL(name); EXPORT_SYMBO…

Python的time模块和datatime模块

https://www.cnblogs.com/tkqasn/p/6001134.html

Linux 驱动开发之内核模块开发 (三)—— 模块传参

一、module_param() 定义 通常在用户态下编程&#xff0c;即应用程序&#xff0c;可以通过main()的来传递命令行参数&#xff0c;而编写一个内核模块&#xff0c;则通过module_param() 来传参。 module_param()宏是Linux 2.6内核中新增的&#xff0c;该宏被定义在include/linux…

Linux 驱动开发之内核模块开发 (二)—— 内核模块编译 Makefile 入门

一、模块的编译 我们在前面内核编译中驱动移植那块&#xff0c;讲到驱动编译分为静态编译和动态编译&#xff1b;静态编译即为将驱动直接编译进内核&#xff0c;动态编译即为将驱动编译成模块。 而动态编译又分为两种&#xff1a; a -- 内部编译 在内核源码目录内编译 b -- 外部…

Exynos4412 文件系统制作(三)—— 文件系统移植

根文件系统一直以来都是所有类Unix操作系统的一个重要组成部分&#xff0c;也可以认为是嵌入式Linux系统区别于其他一些传统嵌入式操作系统的重要特征&#xff0c;它给Linux带来了许多强大和灵活的功能&#xff0c;同时也带来了一些复杂性。我们需要清楚的了解根文件系统的基本…

Snapchat, 给年轻人要的安全感

这几天&#xff0c;Snapchat因拒绝Facebook和谷歌的收购请求而名声大噪。40亿美金的收购请求&#xff0c;并不是任何一个人都可以淡然处之的。一、关于SnapchatSnapchat由两位斯坦福大学生创办&#xff0c;在2011 年9月上线。Snapchat的主要是所有照片都有一个1到10秒的生命期&…

Exynos4412 文件系统制作(二)—— 文件系统简介

一、Linux磁盘分区和目录 Linux发行版本之间的差别很少&#xff0c;差别主要表现在系统管理的特色工具以及软件包管理方式的不同。目录结构基本上都是一样的。 Windows的文件结构是多个并列的树状结构&#xff0c;最顶部的是不同的磁盘&#xff08;分区&#xff09;&#xff0c…

python的urllib2模块

https://www.cnblogs.com/erliang/p/4063883.html https://blog.csdn.net/u014343243/article/details/49308043 https://docs.python.org/zh-cn/2.7/library/urllib2.html

Python中的yield

《python中yield的用法详解——最简单&#xff0c;最清晰的解释》 https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ https://www.runoob.com/w3cnote/python-yield-used-analysis.html