详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

前端之家收集整理的这篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载。通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文件,比如是相关的controller,就是js,这样有利于提高首次加载的负担。

下面就是一个懒加载的实现过程。

实现的过程主要是引用3个主要的JS文件

然后通过 APP 配置,将依赖的脚本进行注入操作:

  app.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",     function ($provide,$compileProvider,$controllerProvider,$filterProvider) {

       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

{{main.value}}

adminUser.html

{{adminUser.value}}

main.js

adminUser.js

demo下载:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/41181.html

猜你在找的JavaScript相关文章