Использование дочернего контроллера из другого модуля

Я определил модуль и сделал его основным модулем для своего приложения, используя директиву ng-app. Я добавил два контроллера в основное приложение, используя angular.module('myApp'). Controller(). Один из этих контроллеров имеет широкоэкранную область, тогда как другой контроллер является дочерним контроллером.

То, что я сейчас пытаюсь сделать, это включить контроллер, принадлежащий другому модулю (не основному модулю myApp), но я не могу понять это. Я не хочу глобальные контроллеры пространства имен.

Кто-нибудь знает, как это сделать?

Вот что я до сих пор:

<!doctype html>
<html lang="en" data-ng-app='myApp' data-ng-controller='myApp.mainController'>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
      var app, module;

      //create two modules, one of which will be used for the app base
      app = angular.module('myApp', []);
      module = angular.module('otherModule', []);

      //create main controller for main app
      app.controller('myApp.mainController', function($scope) {
        $scope.content = 'App main controller content';
      });

      //create child controller for main app
      app.controller('myApp.subController', function($scope) {
        $scope.content = 'App sub controller content';
      });

      //create a controller for the other module
      module.controller('othermodule.controller', function($scope) {
        $scope.content = 'Other module controller content';
      });
    });


  </script>
</head>
<body>

  <!-- output content from main controller from main module: myApp -->
  {{content}}

  <!-- specify use of main module child controller and output its content -->
  <div data-ng-controller='myApp.subController'>
    {{content}}
  </div>

  <!-- NOT WORKING - ideally should output content from the other module controller -->
  <div data-ng-controller='othermodule.controller'>
    {{content}}
  </div>

  <!-- load angular library -->
  <script src="lib/angular/angular.js"></script>
</body>
</html>

Этот код выводит следующее с ошибкой JavaScript, по существу говоря, что контроллер othermodule.controller не найден.

Содержание основного контроллера приложения

Содержимое вспомогательного контроллера приложения

{{содержание}}

Точная ошибка:

> Error: Argument 'othermodule.controller' is not a function, got
> undefined
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1016
> @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4740
> applyDirectivesToNode/nodeLinkFn/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4322
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858
> bootstrap/</<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073
> bootstrap/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936
> @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729
> b.Callbacks/[email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> b.Callbacks/[email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> [email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> [email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> 
> http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js
> Line 5687

Ответ 1