In my Angular JS application, I want to get know which services, modules are used in controllers?

Question

In my Angular JS application, I have 30 controllers, 120 services, 60 directives, 20 filters, 10 modules. How to bring in a relationship between all four of them in a calling - called/injected services/factories relationship?

For example: ControllerA has Service1, Service2 etc injected in it. Service1 uses Service7, Service8 etc. Service2 uses Filter1, Filter7 etc

I need to build a matrix by keeping these four of them in it.

As the code evolves, this help me to understand the code at a very high level.

Answer 1

Rather than starting from scratch, I would recommend taking a look at one of these npm modules. These generate reports in graph format. You can add it as a part of your CI build step to generate architecture diagrams as an artifact for each build.

https://github.com/lucalanca/grunt-angular-architecture-graph

https://github.com/vogloblinsky/gulp-angular-architecture-graph

These npm packages require you to install GraphZViz in the CI agents.

There are also couple of Google Chrome extensions like AngularJS Batarag and AngularJS Graph which can be helpful to visualize the dependencies.