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 -->
这种语法导入所需module
的scrpit
, 可以支持一个模版导入多个文件模块. 指令加载是在模块导入完成以后加载到页面上, 提供生命周期钩子函数, 可以自由控制加载时页面内容. 详细可见项目demo.
angular的异步加载组件以及路由使用
https://mosby-zhou.github.io/2016/10-23-angularjs-async-module/