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

AngularJS通过路由支持多视图应用，可以根据路由动态加载所需视图。在AngularJS文档中有详细描述，网上有很多教程，没必要介绍！

随着视图的不断增加，js文件会越来越多，而Angularjs默认需要一次加载所有的js，使用起来非常不方便，所以按需加载模块的需求会越来越强。但是，AngularJS不实现按需加载。

习惯了seajs的异步加载模式，我也以为angular也可以使用异步加载，但事实并不像预期的那样。

像requirejs一样，angularjs通过预加载来组织模块(这与seajs的惰性加载正好相反)。当单页应用程序中的模块越来越多时，意味着需要预装的模块越来越多，这可能表明angular更适合开发轻型应用程序。

正式开始

我使用angular-ui-router进行路由，需要模块加载器。

//route {state:' login '，template URL 3360 ' log in/log in . html '，controller: ' loginctrl '，resolve : { real ctrl 3360 function($ q){ vardef=$ q . delay()；require(['/features/log in/log in . js ']，function(loginCtrl){ def . resolve(loginCtrl)})；返回def.promise}}}，//获取$ controllerproviderapp.config(函数($ controller provider){ app . register controller=$ controller provider . register；//.})//logincontrollerapp . registercontroller(' loginCtrl '，function ($scope) { //do某物})；实现角度应用按需加载的方法。

我们有一个用angular开发的系统，这是一个单页应用程序。随着系统的迭代，第一屏代码太大，所以对系统进行了改造。

我们主要面临三个问题。

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

2.如何注册异步加载的页面组件？

3.页面组件什么时候加载？

解决第一个问题，angular已经有了模块化方案，引入模块化加载框架有点多余，整体改造量比较大，不考虑。

因此，只实现了loadscript方法来加载组件。加载多个文件时要稍微注意串并行，反复切换页面时要避免重复加载。

第二个问题相当痛苦。angular有一个说法叫“starting”，它发生在domcontentloaded之后，它会编译注入到主模块中的所有依赖项。

如果您想在启动后使用控制器和deractive等api，您将直接报告错误。

目前解决这个问题的方法只有一个，那就是利用主模块的提供者主动注册控制器。但是，因为提供程序不能直接使用，所以我们将其存储在主模块下。

保存的方法可用于注册异步加载的页面组件。缺点是所有子页面都挂在主模块下面。为了解决第三个问题，由于操作平台是单页应用程序，最佳加载时间应该是路由侦听哈希更改的时候。但是，因为我们的路由是一个写死的静态配置，所以一开始没有找到什么好的解决方案。后来发现了这样一个api。

也就是说，在$ routeChangeSuccess之前，我们还是可以做一些事情的，最好把加载时间放在这里。具体实现大概是这样的。

至此，计划已经通过。还剩下什么？1.组织代码，使其更加通用。我们只需要将此写入路由配置中，以便将来开发新页面。

2.重建所有现有页面。由于以前没有按需加载，不同页面之间的服务耦合严重。未来开发新页面时，要注意不同页面之间共享的服务最好放在组件下。

3.更改构造，并用cdn路径替换路线中的js引用。