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 相关文章推荐
JavaScript 原型继承
Dec 26 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
Javascript动画效果(2)
Oct 11 Javascript
vue增删改查的简单操作
Jul 15 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
微信小程序位置授权处理方法
Jun 13 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
django解决跨域请求的问题详解
2019/01/20 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python程序输出无内容的解决方式
2020/04/09 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
python判断正负数方式
2020/06/03 Python
办公室经理岗位职责
2014/01/01 职场文书
自荐信如何制作?
2014/02/21 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
小学教师读书活动总结
2014/07/08 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2015年度企业工作总结
2015/05/21 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
九年级化学教学反思
2016/02/22 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书