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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
详解Puppeteer 入门教程
May 09 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
js实现简单选项卡功能
Mar 23 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue-resourc发起异步请求的方法
Feb 11 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
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
angular select 默认值设置方法
2017/06/23 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
在Vue中使用antv的示例代码
2020/06/29 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python微信公众号开发简单流程实现
2020/03/09 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
协议书与合同的区别
2014/04/18 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
答辩状格式范本
2015/05/22 职场文书
小学班级口号大全
2015/12/25 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
创业计划书之便利店
2019/09/05 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Nginx如何配置根据路径转发详解
2022/07/23 Servers