AngularJS 实现按需异步加载实例代码


Posted in Javascript onOctober 18, 2015

AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了!

随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性加载,使用起来非常不便, 因此按需加载模块的需求会越来越强,不过,AngularJS 并没有实现按需加载。

习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿。

angularjs 和 requirejs 一样,使用的是预先加载的方式组织模块(这和 seajs 的懒加载正好相反),当一个单页面应用的模块越来越多时,也就意味着需要预加载的模块也会越来越多,这也许也就说明了 angular 更适合用来开发轻应用。

正式开始

路由我使用了angular-ui-router,模块加载器是 requirejs

//路由
{
 state : 'login',
 templateUrl : 'login/login.html',
 controller : 'loginCtrl',
 resolve: {
  realCtrl : function ($q) {
   var def = $q.defer();
   require(['/features/login/login.js'], function (loginCtrl) {
    def.resolve(loginCtrl)
   });
   return def.promise;
  }
 }
},

// 获得$controllerProvider
app.config(function($controllerProvider) {
 app.registerController = $controllerProvider.register;
 // ...
})

// loginControler
app.registerController('loginCtrl', function ($scope) {
 // do something
});

angular应用实现按需加载的方法

我们有个系统是用angular开发的,是一个单页面应用,随着系统的迭代,首屏代码已经过于庞大,所以对系统进行改造。

我们主要面临3个问题

1.是否需要模块加载框架?

2.异步加载回来的页面组件,如何注册?

3.在什么时机加载页面组件?

针对第一个问题,由于angular自身已经有一套模块化方案,再引入模块加载框架有点冗余,而且整体改造量比较大,所以不考虑。

因此只是实现了一个loadscript方法,用来加载组件。稍微需要注意的是加载多个文件时候的串并行,和避免页面重复切换时的重复加载。

第二个问题比较蛋疼,angular有“启动”的说法,“启动”发生在domcontentloaded之后,会把所有注入到主模块中的依赖编译一遍。

AngularJS 实现按需异步加载实例代码

启动之后再想使用controller、deractive等api,会直接报错

AngularJS 实现按需异步加载实例代码

目前来看,解决这个问题,只有一个方法,就是利用主模块的provider主动注册controller,但是由于provider不能直接使用,所以我们把它存在主模块下面。

AngularJS 实现按需异步加载实例代码

通过存下来的方法,可以用来注册异步加载回来的页面组件。缺点就是这样子所有子页面都挂在主模块下了。
针对第三个问题,由于运营平台是单页面应用,最好的加载时机应该是路由监听到哈希变化时,但是由于我们的路由是写死的静态配置,一开始没找到什么好的办法。
后来发现了这样一个api

AngularJS 实现按需异步加载实例代码

大概是说,在$routeChangeSuccess之前,我们还可以做些东西,把加载时机放在这里最适合不过啦
具体实现大概是这样子

AngularJS 实现按需异步加载实例代码

至此,这个方案已经通了,剩下什么工作?
1.整理代码,使代码更通用化,我们以后开发新页面,只需要在路由配置里这样写就可以啦

AngularJS 实现按需异步加载实例代码

2.把现有页面都改造一下,由于之前没有按需加载,不同页面之间的service耦合严重,今后我们开发新页面,就要注意不同页面之间共用的service最好放在component下面

3.改构建,给路由里的js引用换成cdn路径。

Javascript 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
AngularJS表单验证功能
Oct 19 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 #Javascript
Javascript中的数据类型之旅
Oct 18 #Javascript
谈谈JavaScript自定义回调函数
Oct 18 #Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 #Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 #Javascript
JavaScript实现的背景自动变色代码
Oct 17 #Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python fileinput模块使用实例
2015/06/03 Python
Python 加密的实例详解
2017/10/09 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Python原始套接字编程实例解析
2020/01/29 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
《李广射虎》教学反思
2014/04/27 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
保护环境的宣传语
2015/07/13 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android