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

angularJS+requireJS实现controller及directive的按需加载相关推荐

AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
java模块化按需加载,JavaScript模块化之使用requireJS按需加载
模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题: JS文件的依赖关系. 通过异步加载优化script标签引起的阻塞问题可以简单的以文件为单位将功能模块化 ...
html中ng-src,angularjs – 在ng-src中使用{{}}绑定,但不会加载ng-src
我一直在试图绑定一个值到ng-src的img HTML元素无效. AngularJS代码: app.controller('footerCtrl',function($scope,userServic ...
angularjs 路由异步加载js
angularjs 异步加载js 有两种方法第一种使用$q 和 requireJS 加载这个问题首要出现在当我把require 引入项目中是,希望做到点击路由时加载相应的页面htm ...
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
为什么80%的码农都做不了架构师?>>> 1.什么是 InfiniteScroll? 无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片 ...
requirejs加载顺序_前端模块化之AMD — Requirejs的使用
前言随着Ajax技术的兴起,前后端分离的开发模式逐渐占领了几乎整个市场,现在的服务器带宽也足够完成大量数据交互,于是很多以前在服务器端的逻辑也可以移植到前端来处理了,从而减轻服务器的压力,当然,这样 ...
html清除require报错,javascript - requirejs加载报错问题？
1.使用requirejs写了个demo.html,第一次加载页面时能够正常显示,随后刷新页面就开始报错,虽然页面还是正常显示,但是我不理解为什么会这样. 2.我的另一个999.html文件(跟dem ...
从 RequireJs 源码剖析脚本加载原理
引言俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...
【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构这两年a ...

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

angularJS+requireJS实现controller及directive的按需加载相关推荐

最新文章

热门文章