动态UI-路由器ocLazyLoad使用决心多个模块 [英] Dynamic ui-router with ocLazyLoad using multiple modules in resolve

问题描述

解决见下文！

从这个问题的工作/解决方案<一href=\"http://stackoverflow.com/questions/26630586/angularjs-dynamic-stateprovider-with-ui-router-views-and-oclazyload-resolves\">Stackoverflow问题.....

我编辑了原来的问题我张贴在这里，因为它不再是值得一读。

我的问题是我无法找到的文档：

1. 使用动态的角度-UI-路由器;


2. 这使得利用ocLazyLoad的;


3. 假如嵌套视图主控制器不需要知道什么;


4. 它有利于建立 REAL WORLD包括模块，其中许多只在一个视图中同时要求，并再次无数的大型角应用的追求，往往无主这种观点的控制器从未需要知道有关这些嵌套任何意见或他们是如何工作的;


5. 和！ 作为奖励，请允许我加入一些基本状态被许多国家这些模块，所以我永远不会需要重新加载它们（这并不适用于服务）。

作为例子：的

如果我做了一个网页，名为MyDashboard，可能包含的东西，MyDashboard会包含典型的信息。

但如果我想表明，网页上的图形，我不想 MyDashboard控制器的，以了解这些图表？

如果我有一个待办事项清单，我在我的应用程序使用，不想 MyDashboard控制器的，以了解这些待办事项什么？

有没有一种方法，我可以添加依赖为嵌套视图MyDashboard控制器的不需要知道他们是如何工作，的而在同时拥有动态？的

有没有一种方法我可以，同时创造的 ---动态--- 状态的看法，只是取代我需要对这一观点的依赖，往往W / O控制器永远需要知道什么他们？

我想下面的是创造一个大型的最佳解决方案 REAL WORLD 的，不可知的，棱角分明的应用程序，具有依赖性装上的需要 - 具备的基础。

我精练ocombe的github上对这样的解决方案。你不会找到它。

我提供以下龙科全自动的解决方案给社会。的这片，它切成小方块，它剥离。的我希望它可以帮助你。

后脚本：这是不是你父亲的世界你好傻​​的例子的

解决方案

的文档中，你不会找到这样的：

 定义（['应用']，功能（应用程序）{
 使用严格的;app.run（函数（$ Q $ rootScope，$状态，$窗口，MenuSvc）{
     //典型呼叫我厂，当然并不必须是JSON
     MenuSvc.all（）。成功（功能（州）{
         angular.forEach（州，函数（州）{
             尝试{
                 //这是神奇的出现，就这么简单，但这么难
                 //找到的文档。 :(
                 VAR的结果= [];
                 angular.forEach（state.dependencies，功能（依赖）{
                     result.push（{
                         名：dependency.module，
                         文件：dependency.files，
                        //这意味着加载为了与放大器的依赖;不中并行
                        //尤其重要，当你加载CSS文件动态
                         意甲：真实，
                         //缓存在内存中，请
                         缓存：真
                     }）
                 }）;
                     // state.resolve是状态的函数调用（$ stateProvider）
                     // [state.resolve]在我的JSON对象的国家的财产的决心
                     state.resolve [state.resolve] =功能（$ ocLazyLoad）{
                         返回$ ocLazyLoad.load（结果）
                     };
             }赶上（E）{
                 的console.log（'错误：'+ e.message）;
             }
             // $ stateProviderRef是我的app.config，例如宣布一个全局变量：
             // $ urlRouterProviderRef = $ urlRouterProvider;
             // $ stateProviderRef = $ stateProvider;
             //记住：供应商必须在配置实例化
             $ stateProviderRef.state（state.name，状态）;
         }）
         //你必须在一个app.run动态UI路由器指定默认状态。必须！！
         //但这并不必须是硬$ C $光盘。您可以在一个属性做一个if语句
         //调用，例如启动的上方和下方传递州名作为变量
         //如。这是在上述指定每个$ state.go（启动）
         $ state.go（'app.MyDashboard'）;
     }）;
 }）}）;
 

我的JSON格式：

  [{
名：应用程序，
抽象：真实，
URL：，
意见：{
  根： {
    templateUrl：应用程序/布局/视图/ tpl.layout.html
    控制器：LayoutCtrl为布局，
    requiresAuthorization：真
  }，
  基地@应用：{
                templateUrl：应用程序/布局/视图/谐音/ tpl.base.html
              //你可以去野外这里添加了控制器，并将它们添加到
              //下面的依赖关系。例如，我的基地已拥有从根本不同的模块。
   }，
  头@应用：{templateUrl：应用程序/布局/视图/谐音/ tpl.header.html}，
  导航@应用：{templateUrl：应用程序/布局/视图/谐音/ tpl.navigation.html}，
  丝带@应用：{templateUrl：应用程序/布局/视图/谐音/ tpl.ribbon.html}
}，
解决：{}，
依赖：
  {
    模块：app.Layout
    文件：
      应用程序/布局/控制器/ LayoutCtrl.js
      //不要把这样的评论在您的JSON，但我发现你
      //可以列出一个基本模块在控制器/指令一次，所有的孩子都会模块
      //继承。然而，这不是为SVCS的情况;他们必须在需要的时候在那里/加载
      （所有需要的控制器和指令布局），
      （需要布局所有的css文件）
    ]
  }，
  {
    模块：app.Graphs
    文件：
      //不要把这样的评论在您的JSON，但我装这些图
      //布局，因为他们将在各个模块中使用，所以不需要在应用程序再次加载
      应用程序/仪表板/图形/指令/在线/ sparklineContainer.js
      应用程序/仪表板/图形/指令/在线/ easyPieChartContainer.js
    ]
  }
]}，{
名：app.MyDashboard
意见：{
  内容@应用：{
    templateUrl：应用程序/仪表板/ _mydashboard / MYDB /视图/ tpl.my.html
    控制器：MyDashboardCtrl为MYDB
    requiresAuthorization：真
  }
}，
解决：{}，
依赖：
  {
    模块：app.MyDashboard
    文件：应用程序/仪表板/ _mydashboard / MYDB /控制器/ MyDashboardCtrl.js]
  }，
  {
    模块：app.ToDo
    文件：
      应用程序/仪表板/ TODO /控制器/ TodoCtrl.js
      应用程序/仪表板/ TODO /指令/ todoList.js
      //这SVC需要装载每一个需要的地方
      应用程序/仪表板/ TODO /服务/ ToDoSvc.js
    ]
  }
]}]
 

它工作!!!!!!!!!!!

SOLVED SEE BELOW!!!

Working from this question/solution Stackoverflow question .....

I edited the original question I posted here because it is no longer worth reading.

My problem was I could not find documentation on:

1. Using dynamic angular-ui-router;
2. That makes use of ocLazyLoad;
3. Had nested views the main controller did not need to know anything about;
4. And it facilitates the pursuit of building a REAL WORLD large-scale angular application comprising of a myriad of modules, many of which are simultaneously required in just one view, and again, often without the main controller of that view never needing to know anything about those nested views or how they work;
5. And! As a bonus, allow me to add those modules used by many states in some base state, so I would never need to load them again (this does not apply to services).

As example:

What if I had a page, called MyDashboard, that may contain typical info on something that MyDashboard would contain.

But what if I wanted to show graphs on that page, and I did not want MyDashboard controller to know about those graphs?

What if I had a To-Do list that I used throughout my app and did not want MyDashboard controller to know anything about those to-dos?

Is there a way I can add dependencies for nested views that MyDashboard controller need not know how they work, WHILE AT THE SAME TIME HAVE DYNAMIC STATE?

Is there a way I could, while creating ---DYNAMIC--- state views, just supplant those dependencies I needed for that view, often w/o the controller never needing to know anything about them?

I think the below is the best solution to creating a large scale REAL WORLD, agnostic, angular app, with dependencies loaded on a "need-to-have" basis.

I scoured ocombe's github for such a solution. You won't find it.

I offer the below 'Ronco-Automatic' solution to the community. It slices, it dices, it peels. I hope it helps you.

Post Script: This is not your father's 'Hello World' sappy example.

解决方案

You WILL NOT find this in the documentation:

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');
     });
 }) });

My Json format:

[   {
"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"
    ]
  }
]   } ]

It works !!!!!!!!!!!

这篇关于动态UI-路由器ocLazyLoad使用决心多个模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！