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


Posted in Javascript onFebruary 20, 2017

最近因为项目的比较大,需要加载的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文件中的一种思路,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
javascript 继承实现方法
Aug 26 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
原生js实现日期选择插件
May 21 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 #Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 #Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 #Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 #Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 #Javascript
jQuery实现一个简单的轮播图
Feb 19 #Javascript
js 博客内容进度插件详解
Feb 19 #Javascript
You might like
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
use jscript List Installed Software
2007/06/11 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python 基于opencv实现图像增强
2020/12/23 Python
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
入党转预备思想汇报
2014/01/07 职场文书
京剧自荐信
2014/01/26 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
安全责任书模板
2014/07/22 职场文书
电话客服工作职责
2014/07/27 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
行政上诉状范文
2015/05/23 职场文书
协议书格式模板
2016/03/24 职场文书
600字作文之感受大自然
2019/11/27 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Golang gRPC HTTP协议转换示例
2022/06/16 Golang