Sunday, October 5, 2014

Combine AngularJS templates in ASP.NET MVC app

Lots of people write pretty heavy JavaScript applications these days, which normally involves client side templates rendering. When we have a lot of templates it potentially might slow down initial application load. AngularJS application lazy loads external files through ajax requests and caches them in $templateCache service in order to reuse them later. One of the possible solutions on how to improve initial load time is to combine multiple files and serve them as one single dependency.

I tried to do it in ASP.NET MVC application recently, but haven’t found any good solutions. There are some nice grunt tasks (for example grunt-angular-templates) to combine AngularJS templates, but I didn’t want to introduce nodejs dependency and implemented an ASP.NET MVC bundle that does pretty much the same thing. Maybe in the next version of Visual Studio grunt/gulp integration is going to be first class citizen, but not for now.

So I created a NuGet package AngularTemplates.Compile that contains ASP.NET MVC bundle and MsBuild task (in case you want to use it outside of ASP.NET MVC pipeline) to combine multiple AngularJS templates. First things first add this package:


PM> Install-Package AngularTemplates.Compile


Then add a bundle with templates:



And render this bundle in your view:


The output result will look similar to this:


Please note that it will generate combined result only when bundle optimizations are enabled (BundleTable.EnableOptimizations = true, or "debug" attribute of "compilation" section in web.config is set to false).

If you prefer MsBuild to precompile and bundle templates/javascripts - there is also available a task:



Packages source are available on github: https://github.com/vadimi/AngularTemplates.Compile

6 comments:

  1. Looks very nice! But how would I access the individual template files from JavaScript files? Instead of from Views as in your example.

    An do you have any thoughts on how to use this in order to control browser caching of the template files?

    ReplyDelete
    Replies
    1. Thanks Don. When angular requests individual templates it checks $templateCache first. So you can write standard angular apps and use your template urls as you normally do in router, directives and views.

      In terms of browser caching - MVC bundling mechanism controls that by adding file hash value to query string.

      Delete
    2. Great, thank you so much for the quick reply!

      Delete
  2. Wow!! Thank you very much.

    Just one request though: Please mention in the docs that, html url in app needs to be exactly similar to what is generated with AngularTemplates.Compile . I was unable to figure out why templateCaching wasn't working, until I set the prefix to '' instead of '/'

    ReplyDelete
  3. What if my initial template files are cshtml files with razor syntax that need to be translated to html before merge

    ReplyDelete
    Replies
    1. Unfortunately this library works only with out of the box angular templates.

      Delete