Question

我正在尝试使用oclazyload和ui-router

在app.config中定义状态时将新模块“testlazy”加载到应用程序中

我是否需要连接require.js以使用现有应用程序加载新模块？我认为oclazyload实际上会引用添加到应用程序中的新模块。如果我走错了路，请纠正我

这是我的新模块，位于

之下

 /js/testlazy

  module.js
  testlazyController.js

我有一个module.js文件和testlazyController.js。

在我的index.html

中

  <head>
      <script type="text/javascript" src="../../dist/ocLazyLoad.js">               </script>
         <script type="text/javascript" src="js/app.js"></script>

   </head>



<body class="container">
    <h1 class="page-header">$ocLazyLoad</h1>
    <div ui-view="lazyLoadView"></div>
</body>

我的app.js

 var aModule = angular.module('dApp', ['ui.router','oc.lazyLoad']);


  aModule.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$ocLazyLoadProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider, $ocLazyLoadProvider) {

$stateProvider
    .state('testlazyload', {
        parent: 'authenticated',
        url: '^/testlazyload',
        templateUrl: 'html/templates/header.html',
        controller: "testlazyController",
        resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
          loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            // you can lazy load files for an existing module
            return $ocLazyLoad.load('js/testlazy/testlazyController.js');
          }]
        }
    });

    $urlRouterProvider.otherwise('/login');
  }]);

我的testlazyController.js

 angular.module('testlazy').controller('testlazyController', ['$scope', '$q', 'ModalService', '$state', '$filter', '$ocLazyLoad',
function ($scope, $q, ModalService, $state, $filter, $ocLazyLoad) {
    console.log("lazyloading complete");
}]);

我的module.js

   angular.module('testlazy', []);

我一直收到错误：我的控制台中的$ injector：nomod模块不可用错误。

一旦我使用脚本标签引用我的index.html中的js文件，它可以工作但是我不再使用延迟加载正确吗？

Answer 1

我不熟悉ocLazyload 并且我不确定这是否真的会有所帮助，但尝试使用它：

loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
        // you can lazy load files for an existing module
        return $ocLazyLoad.load({ name:'testlazy', files: 'js/testlazy/testlazyController.js'});
      }]

或者您必须配置$ocLazyLoadProvider

$ocLazyLoadProvider.config({
modules: [{
    name: 'testlazy',
    files: ['js/testlazy/testlazyController.js']
}]

}）; 配置完成后，您应该可以像这样加载模块：

loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
        // you can lazy load files for an existing module
        return $ocLazyLoad.load('testlazy');
      }]

使用oclazyload的ui-router状态不会将新模块加载到应用程序

1 个答案: