Using a child controller from another module

Question

I've defined a module and made it the main module for my app using the ng-app directive. I added two controllers to the main app using angular.module('myApp').controller(). One of those controllers has page wide scope whereas the other controller is a child controller.

What I'm now trying to do is include a controller that belongs to another module (not the main myApp module), but I can't figure it out. I do not want to globally namespace controllers.

Anyone know how to do this?

Here is what I have so far:

<!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's child controller and output its content -->
  <div data-ng-controller='myApp.subController'>
    {{content}}
  </div>

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

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

This code outputs the following with a JavaScript error essentially saying that the othermodule.controller controller was not found.

App main controller content

App sub controller content

{{content}}

Exact Error:

> Error: Argument 'othermodule.controller' is not a function, got
> undefined
> assertArg@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005
> assertArgFn@http://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
> forEach@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140
> nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307
> compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
> compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956
> nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338
> compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
> publicLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858
> bootstrap/</<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964
> Scope.prototype.$eval@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993
> Scope.prototype.$apply@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073
> bootstrap/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962
> invoke@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843
> bootstrap@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961
> angularInit@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936
> @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729
> b.Callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> b.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> H@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> 
> http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js
> Line 5687

ganaraj ganaraj · Accepted Answer · 2013-04-19T21:49:10

What you have done currently is "declared" two modules app and module.

When angular bootstraps, you have asked it to bootstrap with app. So now your application bootstraps with app but the app has no reference to your other module ( which is module! ).

So, you will have to either bootstrap your application with app and specify a dependency on module or bootstrap your application with a totally new module and specify a dependency on app and module.

This is how you define a dependency

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

If you want to create a totally new module and specify both as dependencies

angular.module('myApp',['app','module'])

Note : if you create a totally new module, you will have to bootstrap your angular application with this new module..

<html ng-app="myApp"...

Using a child controller from another module

1 Answers