AngularJS实现异步加载实例代码的需求

AngularJS实现异步加载实例代码的需求
AngularJS通过路由支持多视图应用程序。它可以根据路由动态加载所需的视图。它在AngularJS文档详细介绍。因特网上有很多教程,所以我们不需要介绍它。

随着视图的不断增加,js文件将越来越多。AngularJS将需要加载所有JS默认。使用起来会很不方便。因此,按需模块的需求将变得越来越强。然而,AngularJS并没有实现按需加载。

我习惯seajs异步加载方式,并认为角也可以使用异步加载,但事实并不遵循。

Angularjs和requirejs,利用组织模块的方式是预加载(这懒加载和seajs相反),当越来越多的模块在单页应用,也意味着需要预加载的模块会越来越多,这也可能表明角更适合轻应用发展。

正式开始
我用角UI路由器的路由,模块加载器是requirejs
路由
{
状态:'login,
TemplateUrl:'login /登录HTML,
控制器:'loginctrl,
解决:{
RealCtrl:功能($ Q){
VaR DEF = q.defer美元();
要求({ / / /登录登录功能。JS的功能(loginctrl){ },
def.resolve(loginctrl)
});
返回def.promise;
}
}
},

/ / controllerprovider美元
app.config(功能($ controllerprovider){)
app.registercontroller = $ controllerprovider.register;

})

/ / logincontroler
App.registerController('loginctrl功能(范围){
做某事
});
按需加载方法实现角应用

我们有一个由角开发的系统,它是一个单页应用程序。随着系统的迭代,第一屏幕代码太大,所以系统被转换。

我们面临3个主要问题

1。你需要一个模块加载框架吗

2。异步加载后台页面组件,如何注册

三.什么时候加载页面组件

针对第一个问题,由于角度已经有了模块化的方案,模块加载框架是冗余的,整体转换比较大,所以不考虑。

所以只是一个加载脚本的方法是实现负载的组件。注意的一点是串并行加载多个文件时,和重复加载来避免页面重复。

第二个问题是鸡蛋疼。角有一个启动参数。domcontentloaded后,它会收集所有依赖注入的主要模块。
After starting, want to use controller, deractive, and other API, will be directly wrong

目前,解决这个问题的方法只有一种,即利用主模块的提供者主动注册控制器,但由于提供者不能直接使用,我们将其置于主模块下。
存储,它可以用来登记,异步加载页面的组件。缺点是所有子页面这样挂在主模块。

针对这第三个问题,由于操作平台是单页应用程序,最好的加载时间应该是路由监控到散列变化。然而,由于我们的路由是静态配置,所以在开始时我们没有找到任何好的方法。

后来才发现这种API
也许,在routechangesuccess美元,我们可以做些什么来把加载时间这里最好的。

具体的实现可能是它的方式。
此时,程序已经通过,剩下的是什么

1。整理代码,使代码更加通用,我们将来会开发一个新页面,只需要写在路线配置上就可以了。
2、转换现有页面。由于缺乏按需加载,不同页面之间的服务耦合严重。将来,当我们开发新页面时,我们应该注意到不同页面共享的服务最好放在组件下面。

三.更改结构以取代路由路径中的JS引用。

tag:异步加载需求实例代码电脑软件angularjs

相关内容