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 相关文章推荐
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
浅谈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
缅甸的咖啡简史
2021/03/04 咖啡文化
php 生成WML页面方法详解
2009/08/09 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
js+html制作简单验证码
2017/02/16 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python opencv之分水岭算法示例
2018/02/24 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
《卖木雕的少年》教学反思
2014/04/11 职场文书
工作总结与自我评价
2014/09/18 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
Python开发五子棋小游戏
2022/05/02 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android