AngularJs根据访问的页面动态加载Controller的解决方案


Posted in Javascript onFebruary 04, 2015

用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载

app.js

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {

  app.register = {

    controller: $controllerProvider.register,

    directive: $compileProvider.directive,

    filter: $filterProvider.register,

    factory: $provide.factory,

    service: $provide.service

  };

});

在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点http://dustindiaz.com/scriptjs

$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

    return 'plugin/' + rd.plugin + '/index.html';

  },

  resolve: {

    load: function($q, $route, $rootScope) {

      var deferred = $q.defer();

      var dependencies = [

        'plugin/' + $route.current.params.plugin + '/controller.js'

      ];

      $script(dependencies, function () {

        $rootScope.$apply(function() {

          deferred.resolve();

        });

      });

      return deferred.promise;

    }

  }

});

controller.js

app.register.controller('MyPluginCtrl', function ($scope) {

  ...

});

 index.html

<div ng-controller="MyPluginCtrl">

  ...

</div>

这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下

app.js

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {

  app.register = {

    controller: $controllerProvider.register,

    directive: $compileProvider.directive,

    filter: $filterProvider.register,

    factory: $provide.factory,

    service: $provide.service

  };

  app.asyncjs = function (js) {

        return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {

            var deferred = $q.defer();

            var dependencies = js;

            if (Array.isArray(dependencies)) {

                for (var i = 0; i < dependencies.length; i++) {

                    dependencies[i] += "?v=" + v;

                }

            } else {

                dependencies += "?v=" + v;//v是版本号

            }

            $script(dependencies, function () {

                $rootScope.$apply(function () {

                    deferred.resolve();

                });

            });

            return deferred.promise;

        }];

    }

});
$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

    return 'plugin/' + rd.plugin + '/index.html';

  },

  resolve: {

    load: app.asyncjs('plugin/controller.js')

  }

});

到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上

$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

    return 'plugin/' + rd.plugin + '/index.html';

  },

  resolve: {

    load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])

  }

});

便可以了

PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦

Javascript 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
15款jQuery分布引导插件分享
Feb 04 #Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 #Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 #Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 #Javascript
Javascript中实现trim()函数的两种方法
Feb 04 #Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 #Javascript
JavaScript检测实例属性, 原型属性
Feb 04 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php之readdir函数用法实例
2014/11/13 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
家长对孩子评语
2014/01/30 职场文书
经典婚礼主持词
2014/03/13 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
结对共建协议书
2014/08/20 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
用Python生成会跳舞的美女
2022/01/18 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android