Where to reference controller.js scripts in angular app

Question

I have just started learning angular.js with .NET MVC, but the major problem that I'm thinking is that in all tutorials people end up referencing 10 controllers and 10 services in the main(_Layout) page which basically looks bad.

Now I know this must sound dumb but I've tried to reference the specific controller / service in its specific page but then angular won't work(for some stupid reason). To mention scripts are loaded, they just dont work!.

Would I end up in minifying all the controllers/services in 1 big file and reference it in the Layout page or is it another way to do it?

Answer 1

Typical approaches:

• Your main page (e.g., index.html) pulls in all your Angular JavaScript files with individual <script> tags. Thus, all definitions are available to the entire application. In most single page web applications, you're only going to have one main page anyway; the rest of your content comes in as needed (e.g., dropped into an ng-view element via the router).
• You use some kind of back-end build process (e.g., a Gulp task) to combine all your separate JavaScript files into one JavaScript file (minified or not); you then pull that file in.