Question

参考此链接： http://www.syntaxsuccess.com/viewarticle/angular-with-requirejs-amd-and-oclazyload

和源代码共享： https://github.com/thelgevold/angular-lazy-load

我正在创建一个简单的角度应用程序，它也有一个抽象状态。

并收到以下错误：未捕获的错误：[$ injector：modulerr] http://errors.angularjs.org/1.3.16/ $ injector / modulerr？p0 = parentConnect＆amp; p1 = E ... 8000％2Farent /％2Fbower_components％2Fangular％2Fangular.min.js％3A17％3A381）

文件夹结构是： enter image description here

的index.html

<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app="parentz">

<head>
  <meta charset="UTF-8">
  <title></title>

  <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script type="text/javascript" src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
  <script data-main="app/main" src="bower_components/requirejs/require.js"></script>
</head>

<body>
  <h1>Hello !</h1>
  <a ui-sref="parent.dashboard">Go to Parent Module</a>
  <div ui-view></div>
</body>

</html>

main.js

// #1 Define requirejs requirement - application.js file which returns app object
require(['application'], function (app) {

	// #4 app object is returned here, call it's user defined bootstrap function
    app.bootstrap();

});

的application.js

define([], function() {

  // #2 Defining the angular module name and it's dependeny array
  var app = angular.module('parentz', ['ui.router', 'oc.lazyLoad']);

  // #5 Enter the config phase and do the specified configurations
  app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider',
    function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {

      // #6 ocLL config, uses requirejs as asyncLoader and loads parentz module by default
      $ocLazyLoadProvider.config({
        loadedModules: ['parentz'],
        asyncLoader: require
      });

      // #7 All unmatched urls end up here
      $urlRouterProvider.otherwise('/index');

      // #8 Configuration of application wide states of all modules
      $stateProvider

        .state('index', {
        url: '/',
        templateUrl: 'index.html'
      })

      .state('parent', {

        // This is the abstract base layout/template state
        abstract: true,
        templateUrl: "app/parent/base.tpl.html",
        resolve: {
          load: function($ocLazyLoad) {

            return $ocLazyLoad.load({
              name: 'parent',
              files: ['app/parent/base.ctrl.js']

            });
          }
        }
      })

      .state('parent.dashboard', {
        url: '/parent/dashboard',
        templateUrl: 'app/parent/dashboard.tpl.html',
        resolve: {
          load: function($ocLazyLoad) {

            return $ocLazyLoad.load({
              name: 'parent',
              files: ['app/parent/dashboard.ctrl.js']
            });
          }
        }
      });

    }
  ]);

  // #9 User defined function that bootstraps the entire app
  app.bootstrap = function() {

    // Angular's bootstrap function
    // Use this function to manually start up angular application
    // Syntax = angular.bootstrap(element, [modules], [config]);
    // Here, we have the config block above
    angular.bootstrap(document, ['parentz']);

  };

  // #3 Return the app object
  return app;
});

父/ base.ctrl.js

angular.module('parent', []);

angular.module('parent').controller('module1Controller', ['service1',
  function(service1) {
    $scope.message = service1.getMessage();
  }
]);

angular.module('parent').factory('service1', function() {
  return {
    getMessage: function() {
      return 'Hello from lazy loaded service';
    }
  };
});

父/ base.tpl.html

<!--Base template for module-->
<h1>Parent Module</h1>
<hr />
<div ui-view></div>

父/ dashboard.ctrl.js

(function() {

  // Declaring angular module
  var app = angular.module('parent');

  // Defining angular controller
  app.controller('DashboardController', function($scope) {

    $scope.text = "Hello from the Ctrl";

  });

})();

父/ dashboard.tpl.html

<div>{{ $scope.text }}</div>

我在这里做错了什么？

Answer 1

我的朋友指出的一个非常小的修复，每当引导永远不提ng-app标记中的<html>时。

在，index.html：ng-app="parentz"需要删除。

<html lang="en" id="ng-app">

以上行正常，没有任何错误。

由于require.js，模块未随页面一起加载，因此在页面后加载。页面不知道这一点，因此它会在执行'parentz'之前尝试查找application.js模块。

$ injector：modulerr甚至在定义模块之后

1 个答案: