AngularAMD: the app depends on services but services depend on the app

Question

I am clearly missing something very basic.

The instructions are to create an app, like this:

define(['angularAMD'], function (angularAMD) {
    var app = angular.module(app_name, ['webapp']);
    ... // Setup app here. E.g.: run .config with $routeProvider
    return angularAMD.bootstrap(app);
});

And then create subsequent items like this:

define(['app'], function (app) {
    app.factory('Pictures', function (...) {
        ...
    });
});

And there is this helpful line:

Any subsequent module definitions would simply need to require app to create the desired AngularJS services

Well that's just great for subsequent module definitions, but app.config and app.run need lots of prerequisite modules that I am supposed to create -- as would any application beyond the level of a toy. So there is obviously some simple solution that I am missing. How do I create services that the app depends on?

Answer 1

You can simply use 'angularAMD' injection to create services. For example,

define(['angularAMD'], function (angularAMD) {
  angularAMD.service('LoggerService',['$log',function($log){
     return function(msg){
        $log.log('message:', msg);
     }
  }]);

});

The services created using this method are available before the application is bootstrapped. Hence app can depend on these services.

More similar code can be found at angular-AMD sample app.