AngularJS has the ability to cache any template the first time it is used, so that it can be loaded afterwards directly from the template cache for quick retrieval. Not only that, but we can also load templates manually into the cache by consuming the $templateCache service directly.

By adding to the mix the built-in capabilities for bundling and minification in Asp.NET MVC, we can speed up our AngularJS app by automatically minifying, combining, and automatically caching our HTML templates with $templateCache.

This is what the output created by the NgTemplateBundle looks like after inserting a couple templates:

angular.module('myApp').run(["$templateCache", function($templateCache) {  
    $templateCache.put("templates/template1.tpl.html",
      "// contents for template1.html ..."
    );
    $templateCache.put("templates/template2.tpl.html",
      "// contents for template2.html ..."
    );
}]);

By serving our HTML templates bundled along with the rest of our static assets, we make sure they are ready when we use ng-include or templateUrl with $routeProvider, without an extra roundtrip to the server.

GIST

http://git.io/UxKsEA

Tags

Bundling , Templates , Asp.NET , AngularJS

Written by