带有 ocLazyLoad 的动态 ui-router 在 resolve 中使用多个模块

Question

已解决，见下文！！！

以此为基础question/solution Whosebug question .....

我编辑了我在这里发布的原始问题，因为它不再值得一读。

我的问题是我找不到以下文档：

使用动态 angular-ui-router;
这利用了 ocLazyLoad；
有嵌套视图，主控制器不需要知道任何相关信息；
它有助于构建一个 REAL WORLD 包含大量模块的大型 angular 应用程序，其中许多模块同时需要一个视图，而且通常没有该视图的主控制器，永远不需要了解这些嵌套视图或它们的工作方式；
还有！ 作为奖励，允许我在一些基本状态中添加许多状态使用的模块，这样我就不需要再次加载它们（这不适用于服务）。

例如：

如果我有一个名为 MyDashboard 的页面，该页面可能包含有关 MyDashboard 将包含的内容的典型信息。

但是，如果我想在该页面上显示图表，并且我不想让 MyDashboard controller 知道这些图表怎么办？

如果我有一个在我的应用程序中使用的待办事项列表并且不希望 MyDashboard 控制器 知道任何关于那些待办事项？

有没有一种方法可以为 MyDashboard 控制器 不需要知道它们如何工作的嵌套视图添加依赖项，同时时间有动态状态吗?

有什么办法可以在创建 ---DYNAMIC--- 状态视图时，仅替换我需要的那些依赖项，通常是 w/o控制器永远不需要了解它们？

我认为以下是创建大型 REAL WORLD、不可知论者、angular 应用程序的最佳解决方案，在 "need-to-have" 基础上加载依赖项。

我在 ocombe 的 github 中搜索了这样的解决方案。你不会找到它。

我向社区提供以下 'Ronco-Automatic' 解决方案。 切片、切丁、去皮。希望对你有帮助。

后记：这不是你父亲的'Hello World'愚蠢的例子。

Answer 1

您不会在文档中找到它：

define(['app'], function (app) {
 'use strict';

app.run(function ($q, $rootScope, $state, $window, MenuSvc) {
     // Typical call to my factory, of course does not have to be json
     MenuSvc.all().success(function (states) {
         angular.forEach(states, function (state) {
             try {
                 // This is where the magic occurs, so simple, but so hard
                 // to find documentation. :(
                 var result = [];
                 angular.forEach(state.dependencies, function (dependency) {
                     result.push({
                         "name" : dependency.module,
                         "files": dependency.files,
                        // this means to load the dependencies in order & not parellel
                        // especially important when you are loading css files dynamically
                         "serie" : true,
                         // cache in memory please
                         "cache" : true
                     })
                 });
                     // state.resolve is a function call of state ($stateProvider)
                     // [state.resolve] is the property 'resolve' of object 'state' in my json
                     state.resolve[state.resolve] = function ($ocLazyLoad) {
                         return $ocLazyLoad.load(result)
                     };
             } catch (e) {
                 console.log('Error: ' + e.message);
             }
             //$stateProviderRef is a global variable I declared in app.config, eg:
             //$urlRouterProviderRef = $urlRouterProvider;
             //$stateProviderRef = $stateProvider;
             //Remember: providers must be instantiated in config
             $stateProviderRef.state(state.name, state);
         })
         // You must designate default state in a dynamic ui-router in the app.run. Must!!
         // but this does not have to be hard-coded. You can do an if statement on a property
         // called, eg 'startUp" above and pass that state name below as a variable
         // eg. $state.go(startUp) which is designated above in the for each
         $state.go('app.MyDashboard');
     });
 }) });

我的Json格式：

[   {
"name": "app",
"abstract": true,
"url": "",
"views": {
  "root": {
    "templateUrl": "app/layout/views/tpl.layout.html",
    "controller": "LayoutCtrl as layout",
    "requiresAuthorization": true
  },
  "base@app": {
                "templateUrl": "app/layout/views/partials/tpl.base.html"
              // You can go wild and add controllers here and add them to
              // your dependencies below. Eg, My base has own modules different from root.
   },
  "header@app": {"templateUrl": "app/layout/views/partials/tpl.header.html"},
  "nav@app": {"templateUrl": "app/layout/views/partials/tpl.navigation.html"},
  "ribbon@app": {"templateUrl": "app/layout/views/partials/tpl.ribbon.html"}
},
"resolve": {},
"dependencies": [
  {
    "module": "app.Layout",
    "files": [
      "app/layout/controllers/LayoutCtrl.js",
      // Don't put comments like this in your json, but I discovered that you
      // can list controllers/directives once in a base module and all children modules will
      // inherit. HOWEVER, that isn't the case for svcs; they must be loaded where/when needed
      (all the needed controllers and directives for layout),
      (all the css files needed for layout)
    ]
  },
  {
    "module": "app.Graphs",
    "files": [
      //Don't put comments like this in your json, but I loaded these graphs
      //in layout as they will be used in various modules, so don't need to load again in app
      "app/dashboards/graphs/directives/inline/sparklineContainer.js",
      "app/dashboards/graphs/directives/inline/easyPieChartContainer.js"
    ]
  }
]   },   {
"name": "app.MyDashboard",
"views": {
  "content@app": {
    "templateUrl": "app/dashboards/_mydashboard/myDb/views/tpl.my.html",
    "controller": "MyDashboardCtrl as myDb",
    "requiresAuthorization": true
  }
},
"resolve": {},
"dependencies": [
  {
    "module": "app.MyDashboard",
    "files": ["app/dashboards/_mydashboard/myDb/controllers/MyDashboardCtrl.js"]
  },
  {
    "module": "app.ToDo",
    "files": [
      "app/dashboards/todo/controllers/TodoCtrl.js",
      "app/dashboards/todo/directives/todoList.js",
      // This svc needs to be loaded every where it is needed
      "app/dashboards/todo/services/ToDoSvc.js"
    ]
  }
]   } ]

有效!!!!!!!!!!!!

Answer 2

这个解决方案，对我有用
在config.lazyload.js

$ocLazyLoadProvider.config({
      debug:  false,
      events: true,
      modules: [
          {
              name:'angularFileUpload',
              files: [
                  baseUrl+'vendor/modules/angular-file-upload/2.3.4/angular-file-upload.min.js'
              ]
          },
          {
              name:'ngFileUpload',
              files: [
                  baseUrl+'vendor/modules/ng-file-upload/12.0.4/common.css',
                  baseUrl+'vendor/modules/ng-file-upload/12.0.4/ng-file-upload-shim.js',
                  baseUrl+'vendor/modules/ng-file-upload/12.0.4/ng-file-upload.js'
              ]
          }
      ]
  });

在config.router.js

.state('root.app.catalog.product', {
              url: '/product',
              templateUrl: adBaseUrl+'catalog_product.html',
              resolve: {
                  deps: ['$ocLazyLoad',
                    function( $ocLazyLoad ){
                      return $ocLazyLoad.load(['ngFileUpload','angularFileUpload']).then(
                        function(){
                          return $ocLazyLoad.load( [baseUrl+'js/controllers/product.js', 
                            baseUrl+'js/controllers/upload.js',
                            baseUrl+'js/controllers/file-upload.js'
                          ]);
                        }
                      )
                  }]
              }
          })

config.router.js 将加载 2 个模块 ngFileUpload ， angularFileUpload 和所有文件从 config.lazyload.js 定义，在这里我可以加载 2 个模块，如果你想要更多

带有 ocLazyLoad 的动态 ui-router 在 resolve 中使用多个模块

Dynamic ui-router with ocLazyLoad using multiple modules in resolve

lazy-loading

angularjs