使用 Angular ui 路由和 ocLazyLoad 加载模块和工厂文件答案

【问题标题】：loading modules and factories files using angular ui routing and ocLazyLoad使用 Angular ui 路由和 ocLazyLoad 加载模块和工厂文件
【发布时间】：2015-08-18 10:41:11
【问题描述】：

i'，使用带有ocLazyLoad的角度ui路由根据选择的stat加载附录文件，如下代码所示

我的问题是：

当我加载新状态并单击刷新时，工厂未初始化 - 我认为这是因为在初始化控制器之前文件未完全加载 -

我也尝试在同一个 ocLazyLoad 函数中合并所有文件并使用 serie : true 但不工作

ocLazyLoad 的使用是否正确

我有以下模块

  angular.module('app', [ "oc.lazyLoad"]);
  angular.module("app.inventory", []);
  angular.module("app.sales", []);

这里是路由

.state("invoicesAddEdit", {
          url: "/invoice/:invoiceId",
          templateUrl: "app/components/sales/invoice/views/invoiceAddEdit.view.html",
          controller: "InvoiceAddEditController",

          resolve: {
              invoiceId: ['$stateParams', function ($stateParams) {
                  return $stateParams.invoiceId;
              }],
              settings: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.settings",
                      files: [
                              "app/components/settings/settings.module.js",
                              "app/components/settings/currency/services/currency.factory.js",
                              "app/components/settings/deliveryMan/services/deliveryMan.factory.js",

                      ]
                  })
              }],

              inventory: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.inventory",
                      files: [
                              "app/components/inventory/inventory.module.js",
                              "app/components/inventory/customer/services/customer.factory.js",
                              "app/components/inventory/store/services/store.factory.js",
                              "app/components/inventory/product/services/product.factory.js",

                      ]
                  })
              }],
              purchasing: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.purchasing",
                      files: [
                              "app/components/purchasing/purchasing.module.js",
                              "app/components/purchasing/purchaseOrder/services/purchaseOrder.factory.js",

                      ]
                  })
              }],
              sales: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.sales",
                      files: [
                              "app/components/sales/sales.module.js",
                              "app/components/sales/representative/services/representative.factory.js",

                              "app/components/sales/invoice/services/invoice.factory.js",
                              "app/components/sales/invoice/controllers/invoiceAddEdit.controller.js",

                      ]
                  })
              }],
          }
      })

【问题讨论】：

标签： angularjs angular-ui-router oclazyload

【解决方案1】：

尝试将 oCLazy Load 作为 deps 注入，并在 html 中的特定标记之前插入所需的文件，如下所示：

      resolve: {
          invoiceId: ['$stateParams', function ($stateParams) {
              return $stateParams.invoiceId;
          }],
          deps: ['$ocLazyLoad', function ($ocLazyLoad) {
              return $ocLazyLoad.load({
                 name: "app.settings",
                 insertBefore: '#ng_load_plugins_before', 
                 files: [
                          "app/components/settings/settings.module.js",
                          "app/components/settings/currency/services/currency.factory.js",
                          "app/components/settings/deliveryMan/services/deliveryMan.factory.js",

                  ]
              })
          }],

将以下链接添加到 html 页面或视图的标题中：

  <link id="ng_load_plugins_before"/>

【讨论】：