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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
JS简单计算器实例
Jan 20 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
详解Js中的模块化是如何实现的
Oct 18 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
js实现橱窗展示效果
2020/01/11 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
初一科学教学反思
2014/01/27 职场文书
党员作风建设自查报告
2014/10/23 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
母亲去世追悼词
2015/06/23 职场文书