AngularJS v1 Template Bundler

AngularJsHtmlBundle.cs

using System.Web.Optimization;

namespace Company.Web.UI
{

        public class AngularJsHtmlBundle : Bundle
        {
            public AngularJsHtmlBundle(string moduleName, string virtualPath)
                : base(virtualPath, null, new[] { (IBundleTransform)new AngularJsHtmlCombine(moduleName) })
            {
            }
        }
}

AngularJsHtmlCombine.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;
using System.Web.Optimization;
using Newtonsoft.Json;

namespace Company.Web.UI
{

        public class AngularJsHtmlCombine : IBundleTransform
        {
            private const string JsContentType = "text/javascript";
            private readonly string moduleName;

            public AngularJsHtmlCombine(string moduleName)
            {
                this.moduleName = moduleName;
            }
            public string ReplaceFirst(string text, string search, string replace)
             {
                    int pos = text.IndexOf(search);
                    if (pos < 0)
                    {
                        return text;
                    }
                    return text.Substring(0, pos) + replace + text.Substring(pos + search.Length);
             }
            public virtual void Process(BundleContext context, BundleResponse response)
            {
                if (context == null)
                    throw new ArgumentNullException("context");
                if (response == null)
                    throw new ArgumentNullException("response");

                if (!context.EnableOptimizations)
                {
                    response.Files = new List<BundleFile>();
                    response.Content = string.Format("angular.module('{0}',[])", this.moduleName);
                    response.ContentType = JsContentType;

                    return;
                }

                if (string.IsNullOrWhiteSpace(this.moduleName))
                {
                    response.Content = "// No or wrong app name defined";
                    response.ContentType = JsContentType;
                    return;
                }

                var contentBuilder = new StringBuilder();
                // contentBuilder.Append("(function(){");
                contentBuilder.AppendFormat("angular.module('{0}').run(['$templateCache',function(t){{", this.moduleName);

                foreach (var file in response.Files)
                {
                    var rootPath = VirtualPathUtility.ToAbsolute("~/");
                    string fileId = VirtualPathUtility.ToAbsolute(file.IncludedVirtualPath).Replace(rootPath, "");
                    fileId = ReplaceFirst(fileId, rootPath, "");
                    string filePath = HttpContext.Current.Server.MapPath(file.IncludedVirtualPath);
                    string fileContent = File.ReadAllText(filePath);

                    contentBuilder.AppendFormat("t.put({0},{1});",
                        JsonConvert.SerializeObject(fileId),
                        JsonConvert.SerializeObject(fileContent));
                }

                contentBuilder.Append("}]);");
                // contentBuilder.Append("})();");

                response.Content = contentBuilder.ToString();
                response.ContentType = JsContentType;
            }
        }
}

Code to bundle AngularJS 1 templates into a single file. Bundling ensures they load faster and are versioned so that old versions are not cached.

Usage

Inside BundleConfig.cs:

bundles.Add(new AngularJsHtmlBundle("app", "~/app/templates") .IncludeDirectory("~/app", "*.html", true)); BundleTable.EnableOptimizations = true;

Inside layout or view html:

@Scripts.Render("~/app/templates")