angular的异步加载组件以及路由使用

ui-router应该可以算angular最重要的组件之一了, 简单易用, 不过它的template基于controller的做法不太符合我们项目里directive-first的原则, 而且它的异步加载模块ocLazyLoad语法不太好用, 需要配置在 app 初始化的config中, 不能实现动态配置和动态读取. 所以之前自己实现了一个建议版本的异步加载模块指令, 供项目组使用.

angular-async-module
加入了动态加载读取模块, 也可以和ui-router分离使用, 可以对加载开始和结束的行为进行事件响应.

对于router, 不建议使用controller来控制模版行为, 而建议使用指令来控制模版. 一般是一个router对应一个module, 根据需求可选这个module是否异步.
angular-async-module对于模块的加载是基于ng-include指令的, 页面需要为一个模版页, 正常情况会包含展示的自定义指令, 用<!-- script: asyncDemo/asyncDemoMod -->这种语法导入所需modulescrpit, 可以支持一个模版导入多个文件模块. 指令加载是在模块导入完成以后加载到页面上, 提供生命周期钩子函数, 可以自由控制加载时页面内容. 详细可见项目demo.

angular的异步加载组件以及路由使用

https://mosby-zhou.github.io/2016/10-23-angularjs-async-module/

作者

Mosby

发布于

2016-10-23

许可协议

评论