3

在使用 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 Module Unavailable 错误。

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

4

1 回答 1

0

I am not quety familiar with ocLazyload and am not sure if this actually will help but try to use this:

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

or you must configure $ocLazyLoadProvider

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

}); After configuration you should be able to load the module like this:

loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
        // you can lazy load files for an existing module
        return $ocLazyLoad.load('testlazy');
      }]
于 2015-04-13T20:06:54.750 回答