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

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之后，会把所有注入到主模块中的依赖编译一遍。

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

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

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

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

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

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

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

赞 (0)

相关推荐

  • AngularJS 异步解决实现方法

    AngularJS 异步解决实现方法 Angular 的异步处理的真的很不错.基于消息广播的方式,并且可以向上传递,基本上解决了不同模块,不同controller之间不方便异步的问题. 场景一:通过回调函数进行异步操作(该情况下不用消息广播的机制) 这种情况的特点是直接传递一个回调函数给异步操作就可以了,等异步操作完执行回调. 比如:controller通过server异步取数据,等取完数据进行一系列的操作,这个时候就可以把操作封装到函数中,传递给异步操作函数. controller代码片段举例

  • 详解angularjs利用ui-route异步加载组件

    ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等.随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k.异步加载各个组件就很有必要.在这里我就以ui-route为框架来进行异步加载说明. 首先看一下路由加载文件 angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) { $sta

  • AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht

  • angularjs 处理多个异步请求方法汇总

    在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码 代码如下: $http.get('url1').success(function (d1) {         $http.get('url2').success(function (d2) {             //处理逻辑         });     }); 解决方法二: then中的方法会按顺序执行. 复制代码 代码如下: var app = ang

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

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

    AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了! 随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性加载,使用起来非常不便, 因此按需加载模块的需求会越来越强,不过,AngularJS 并没有实现按需加载. 习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿. angularjs 和 requi

  • JQuery ztree带筛选、异步加载实例讲解

    JQuery ztree带筛选、异步加载实例讲解

    本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

  • 详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

    最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack 1.webpack一下自己就

  • JQuery ztree 异步加载实例讲解

    JQuery ztree 异步加载实例讲解

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav

  • jQuery zTree树插件动态加载实例代码

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没

  • angular实现图片懒加载实例代码

    这两天一直纠结angular的图片懒加载插件中无法自拔.在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上.这里主要谈谈在使用插件的过程遇到的一些问题. 一)我使用的是angular-imglazyload这个插件.[https://www.npmjs.com/package/angular-imglazyload]主要是这个插件小不依赖jquery库,然后下载源码运行成功后,我就整合到自己项目上运行,结果发现竟然只有前2张加载了,滚动了都没有反映.下面是我的

  • VUE路由动态加载实例代码讲解

    首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,路由配置也会越来越大,路由文件就会变得不好维护 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import Test1 from './test1.router.js' import Test2 f

  • Treegrid的动态加载实例代码

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: 1.前端 <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <script type="text/javascript"> $(function() { $('#goods_type_treegrid').treegrid({

  • jquery zTree异步加载简单实例讲解

    本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM

  • Javascript 异步加载详解(浏览器在javascript的加载方式)

    一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. js 之所以要同步执行,是因为 js 中可能有输出 document 内容.修改dom.重定向等行为,所以默认同步执行才是安全的. 以前的一般建议

随机推荐