最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载。通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文件,比如是相关的controller,就是js,这样有利于提高首次加载的负担。
下面就是一个懒加载的实现过程。
实现的过程主要是引用3个主要的JS文件:
然后通过 APP 配置,将依赖的脚本进行注入操作:
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
}]);
// 按模块化加载其他的脚本文件
app.constant('Modules_Config',[
{
name: 'treeControl', serie: true, files: [
"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
]
}]);
app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
debug:false, events:false, modules:Modules_Config
});
};
以上是初始化动态加载的配置过程。
接着是建立路由:
最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
main.html
adminUser.html