An Angular Template Bundle for ASP.NET MVC
I’ve been writing Angular apps for a few years and have always wanted a simple way to bundle all of my Angular templates. I’ve tried a few simple solutions such as T4 templates and build tasks, but none of these seemed to work the way I imagined they should. I thought, someone must have made a bundle for Angular templates that was simple and implemented similar to the standard bundles.
I went searching around and instantly found grunt and gulp scripts to do this. I also found a few ASP.NET bundles but I didn’t fall in love with any of them because (many of them) had clunky API’s, got in my way or would shake up my coding process.
The idea seemed pretty simple; add a bundle that would search my app’s folder for template html files and the bundle would build out an Angular run function that would add all the templates to the Angular template cache.
Meet Angular Template Bundler (github, nuget)
Add this line to your BundleConfig.cs:
bundles.Add(new AngularTemplateBundle("VIRTUAL_PATH", "ANGULAR_MODULE_NAME")
.IncludeDirectory("PATH_TO_APP_FOLDER", "SEARCH_PATTERN", SEARCH_SUBFOLDERS));
This creates an Angular template bundle and adds it to the bundle table. The input parameters are the standard for a bundle with the exception of “ANGULAR_MODULE_NAME” which is simply the module name of your main Angular app.
Then, add this line to your main razor page:
@Scripts.Render("VIRTUAL_PATH")
Like a standard JavaScript bundle, this will link to the generated JavaScript file; As a note, bundle optimizations must be enabled for the Angular template bundle to be generated.