How do I use AngularAMD without routes

Question

I have an AngularAMD app, and I have a directive that depends (in a RequireJS sense) on that app (it is the Angular module in which that directive "lives").

If I use routing, and use the directive inside a routed view, then there is a route that includes a controllerUrl, which depends on the file containing the directive.

If I don't, then...

Well, it's enragingly circular. If I tell the app that it depends on the directive, I get a circular dependency. If I don't, Angular doesn't know about the directive and the tag is just ignored.

Short of reproducing the entire controller-resolving mechanism from AngularAMD, is there a way I supposed to do this?

Answer 1

I think that there can be two cases:

1) Your directive is standalone and doesn't actually depend on anything in the application.

In this case you can put it into own module (both in terms of RequireJS and angular):

// my-directive.js
var module = angular.module('my-directive', []);

module.directive('myDirective', [
  ...
]);

// app.js (depends on my-directive.js)
var app = angular.module('myapp', ['my-directive']);

This use case is supported by AngularAMD, see 3rd Party AngularJS Modules.

2) Your directive depends on something inside your app. In this case - put it into the same module (also both in terms of angular and RequireJS).

// app.js
var app = angular.module('myapp', []);

app.directive('myDirective', [
  ...
]);

3) [Update] One more solution: AngularAMD also supports a special case to define and load an application wide module.