Inject my controllers without needing to place them all in the head tag - AngularJS
<p>I have a structure to my angularjs app project as below: </p>

<p><a href="https://i.stack.imgur.com/MSWa9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MSWa9.png" alt="enter image description here"></a></p>

<p>I am aiming to have each component have its own controller and service to display portfolio information like images, videos, links etc. </p>

<p>The issue I am having is that the only way I am able to define each controller is by stacking them into my head tag in the index.html file. If I choose to create more pages, I am going to have to do this over and over again, meaning lots of calls, lots of load time etc. </p>

<p>Is there a way to inject each of these controllers into the app.module.js file, so this is the only file that needs to be loaded? </p>

<p>thanks in advance. </p>