AngularJs Modules Good architecture

Every AngularJS developer understands modules and dependency injection (DI), but designing a scalable module architecture can be challenging.

Warning

Since AngularJS is now a deprecated framework, you can use modern JavaScript frameworks like Vue.js, React, and Angular, instead.

Here is the problem.

Modules

angular.module('Movie', ['Actor'])    // In this module we need actors
    .factory('getMovies', function() { return []; });
// Note: Calling angular.module('name', []) creates a new module. Calling angular.module('name') without the second argument retrieves an existing one.
angular.module('Actor')               // In this module we need movies
    .factory('getActors', function() { return []; });

// But this creates a circular dependency
// What to do?

A common pitfall is creating circular dependencies between feature modules. Here is a reliable approach to resolve it.

The Solution: Use the Manager Module Pattern. Instead of mirroring your data models, create independent modules that expose shared services or factories. Feature modules then depend on these managers:

Example

angular.module('MoviesManager', [])
   .factory('moviesManagerService', function() { return {}; });
angular.module('ActorsManager', [])
   .factory('actorsManagerService', function() { return {}; });

// Feature modules depend on the independent managers
angular.module('Movie', ['MoviesManager', 'ActorsManager'])
   .controller('MovieCtrl', function(moviesManagerService, actorsManagerService) {
      // Inject and use moviesManagerService and actorsManagerService here
   });

angular.module('Actor', ['ActorsManager', 'MoviesManager'])
   .controller('ActorCtrl', function(actorsManagerService, moviesManagerService) {
      // Inject and use actorsManagerService and moviesManagerService here
   });

angular.module('Theatre', ['Actor', 'Movie']) // depends only on feature modules

In practice, these manager factories would expose methods or services to coordinate data between features (e.g., moviesManagerService.fetch()). As you can see, this structure eliminates circular dependencies. The Manager modules remain independent and only expose services, while feature modules depend on them. This one-way dependency flow prevents cycles and keeps the architecture flexible and useful.