When developing an application in ASP.NET MVC and Angular, it's important to carefully consider where to store Angular scripts. Typically, the main application files containing Angular modules are placed inside the Scripts directory and referenced in the Layout view.
But what about controllers? Angular controllers are usually associated with a specific view. While it may be tempting to embed them within the view's script section, this is not the best practice. By doing so, the controller will not be a separate JavaScript file and may encounter caching issues.
@section scripts{
<script type="text/javascript">
'use strict';
foo.controller('fooBarCtrl',
...
A common practice is to store controllers in the Scripts\Controllers directory, with each controller in a separate file. This approach not only avoids caching problems but also prevents mixing Razor and JavaScript, and enables script minification when bundled.
The question then arises - how should we reference these scripts? Some examples load all scripts in a single bundle within the Layout, but this may not be optimal for larger projects. Would it be better to wrap each script in a separate bundle and reference it in the script section?
@section scripts{
<script src="@Url.Content("~/Scripts/Controllers/fooCtrl.js")" type="text/javascript"></script>
}
What is considered the best practice for referencing Angular controllers?