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

Posted renyunbo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖相关的知识,希望对你有一定的参考价值。

好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本。

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

  1.  <script src="angular/1.4.8/angular/angular.min.js"></script>
  2. <script src="angular/ui-router/release/angular-ui-router.min.js"></script>
  3. <script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>

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

  1.  var app = angular.module(‘pkcms‘, ["ui.router", "oc.lazyLoad"]);
  2. app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
  3. function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
  4. app.controller = $controllerProvider.register;
  5. app.directive = $compileProvider.directive;
  6. app.filter = $filterProvider.register;
  7. app.factory = $provide.factory;
  8. app.service = $provide.service;
  9. app.constant = $provide.constant;
  10. }]);
  11. // 按模块化加载其他的脚本文件
  12. app.constant(‘Modules_Config‘, [
  13. {
  14. name: ‘treeControl‘,
  15. serie: true,
  16. files: [
  17. "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
  18. ]
  19. }
  20. ]);
  21. app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
  22. function routeFn($ocLazyLoadProvider,Modules_Config){
  23. $ocLazyLoadProvider.config({
  24. debug:false,
  25. events:false,
  26. modules:Modules_Config
  27. });
  28. };

以上是初始化动态加载的配置过程。

接着是建立路由

  1.  "use strict"
  2. app.config(["$stateProvider","$urlRouterProvider",routeFn]);
  3. function routeFn($stateProvider,$urlRouterProvider){
  4. $urlRouterProvider.otherwise("/main");
  5. $stateProvider
  6. .state("main",{
  7. url:"/main",
  8. templateUrl:"views/main.html",
  9. controller:"mainCtrl",
  10. controllerAs:"main",
  11. resolve:{
  12. deps:["$ocLazyLoad",function($ocLazyLoad){
  13. return $ocLazyLoad.load("controllers/main.js");
  14. }]
  15. }
  16. })
  17. .state("adminUser",{
  18. url:"/adminUser",
  19. templateUrl:"views/adminUser.html",
  20. controller:"adminUserCtrl",
  21. controllerAs:"adminUser",
  22. resolve:{
  23. deps:["$ocLazyLoad",function($ocLazyLoad){
  24. return $ocLazyLoad.load("controllers/adminUser.js");
  25. }]
  26. }
  27. })
  28. };

最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
main.html

  1.  <div>
  2. {{main.value}}
  3. </div>

adminUser.html

  1.  <div>
  2. {{adminUser.value}}
  3. </div>

main.js

  1.  /**
  2. * mainCtrl
  3. * Created by pkcms.cn on 2016/6/24.
  4. */
  5. (function () {
  6. "use strict"
  7. app.controller("mainCtrl", mainCtrlFn);
  8. function mainCtrlFn() {
  9. this.value = "Hello World";
  10. }
  11. }())

adminUser.js

  1.  /**
  2. * adminUserCtrlFn
  3. * Created by pkcms.cn on 2016/6/24.
  4. */
  5. (function () {
  6. app.controller(‘adminUserCtrl‘,adminUserCtrlFn);
  7. function adminUserCtrlFn() {
  8. this.value = "welcome to admin user";
  9. }
  10. }());

github url :https://github.com/366065186/angularjs-oclazyload

转载请注明:PKCMS博客 » AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

以上是关于AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖的主要内容,如果未能解决你的问题,请参考以下文章

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

AngularJS_ocLazyLoad

AngularJS、ocLazyLoad 和 ui-router:如何在不将“状态”集中在 app.js 主类上的情况下按需加载

ui-router中使用ocLazyLoad和resolve

重新编译angularJS组件?

如何在ui-router resolve属性中使用ocLazyLoad解析文件