Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS v1 Template Bundler
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) })
{
}
}
}
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;
}
}
}
@danroot

This comment has been minimized.

Copy link
Owner Author

@danroot danroot commented Dec 16, 2016

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")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment