Question: I'm currently using a combination of RequireJS and AngularJS in my application and on the server side is ASP.NET.

I chose to use RequireJS for a few of reasons:

* I started the project with it before discovering Angular.
* Easy loading of external APIs (eg. Facebook, Google).
* Easy minification via. R.js
* Easy to add files to the project as it grows, no need for additional script tags.

As the project has matured most areas I previously used RequireJS for now seem redundant which means most files end up with another level of indentation (and nothing more) thanks to the define wrapper:

```
define(['angular'], function(angular) {});

```

There's probably also a small perf. benefit when removing it too :)

So my question is, what's the best (and preferably quickest) way to manage AngularJS applications within the context of an ASP.NET environment? ASP.NET script bundles? Grunt tasks?

Answer: 
I was searching for the best design/structure of the *Visual Studio* Web-Project hosting the Angular SPA. I've found many inspiration and after checking few templates, I realized that what I would like to achieve is:

* profit from VS resp. ASP.NET (MVC) as much as possible
* split the functionality into more/smaller files (controller, state, config, directive)
* keep the logic of each Aspect (usually Entity) inside one folder (e.g. Employee/)
* keep the files as close together as possible i.e. view, controller, **test** ([ng-boilerplate](https://github.com/ngbp/ng-boilerplate))
* the structure of files like this

Example of folder/file structure

```
 // external libs
 Scripts
 Scripts / angular.js
 Scripts / ui-bootstrap-x.y.js
 Scripts / ...

 // project libs
 MyApp
 MyApp / Module
 MyApp / Module / Employee
 MyApp / Module / Employee / Employee.state.js        // state machine settings
 MyApp / Module / Employee / EmployeeList.ctrl.js     // controllers
 MyApp / Module / Employee / EmployeeDetail.ctrl.js
 MyApp / Module / Employee / DisplayEmployee.dirc.js  // directive
 MyApp / Module / Employee / Employee.spec.js         // tests

 // similar for other stuff
 ...

```

As we can see, the trick is in suffix of each single/simple *js* file: 

* ".dirc.js" - directive
* ".ctrl.js" - controller
* ".spec.js" - tests
* ...

Having this in place we can configure the Bundle:

```
bundles.Add(new ScriptBundle("~/js/app")
    .Include("~/MyApp/app.js")
    .Include("~/MyApp/app.config.js")
    .IncludeDirectory("~/MyApp/", "*.module.js", true)
    .IncludeDirectory("~/MyApp/", "*.dirc.js", true)
    .IncludeDirectory("~/MyApp/", "*.ctrl.js", true)
    .IncludeDirectory("~/MyApp/", "*.state.js", true)
    ...
    );

```

See that **tests** are placed inside of this structure, but not part of the bundle...

An extract of the *index.cshtml*

```
<html data-ng-app="MyApp">
    <head>
      ...
      @Styles.Render("~/Content/css")
    </head>
    <body>        
        <div class="body" data-ui-view="body"></div>
        @Scripts.Render("~/js/angular")
        @Scripts.Render("~/js/app")
  </body>

```

During development, small setting in *web.config* `<compilation debug="true"` loads all the files separately, easy to debug.

Just change the `debug="false"` and there are only two JS loads from the server in production
Normally I use ASP.NET MVC and WebAPI on the server and then using ASP.NET Bundling makes a lot of sense. It is there out of the box and is easy to use. With AngularJS I am less worried about forgetting a script file and not noticing as you declare all dependencies at the module level. If one is missing the whole app doesn't run making these, otherwise hard to spot, errors really obvious.

Grunt is also a powerful option but one I would only go for if I was doing Node on the server. In that case I will be doing a lot more through grunt anyway.