使用ocLazyLoad的动态ui-router使用多个模块解析

Question

解决了以下!!!

使用此问题/解决方案Stackoverflow问题 .....

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

我的问题是我找不到文档:

1. 使用动态angular-ui-router;
2. 这使用了ocLazyLoad;
3. 有嵌套视图,主控制器不需要知道任何事情;
4. 它有助于构建一个REAL WORLD大规模角度应用程序,其中包含大量模块,其中许多模块仅在一个视图中同时需要,而且,通常没有该视图的主控制器,从不需要知道任何关于那些嵌套的视图或它们如何工作;
5. 和!作为奖励,允许我添加许多状态在某些基本状态下使用的模块,因此我永远不需要再次加载它们(这不适用于服务).

例如:

如果我有一个名为MyDashboard的页面,可能包含MyDashboard将包含的内容的典型信息,该怎么办？

但是,如果我想在该页面上显示图形,我不希望MyDashboard控制器知道这些图形怎么办？

如果我有一个我在整个应用程序中使用的待办事项列表并且不希望MyDashboard控制器知道有关这些待办事项的内容,该怎么办？

有没有办法可以为嵌套视图添加依赖项,MyDashboard控制器不需要知道它们是如何工作的,而在同一时间是否具有动态状态？

有没有办法,我可以创建--- DYNAMIC ---状态视图,只是取代我对该视图所需的依赖关系,通常没有控制器永远不需要了解它们的任何内容？

我认为以下是创建大规模REAL WORLD,不可知,角度应用程序的最佳解决方案,依赖性加载在"需要"的基础上.

我搜索了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"
    ]
  }
]   } ]

有用 !!!!!!!!!!!