Monthly Archives: May 2014

HTML Template Bundling

ASP.NET provides the capability to bundle style and scripts as bundle using System.Optimization package. So on similar lines we have extended this concept to bundle HTML templates, these templates could be angular or any other type of template as well. The implementation will closely resemble the patterns introduced by ASP.NET Web Optimization library, integrating with the extensibility and configuration mechanisms it provides, as much as possible.

It Provides following capabilities

  1. Provide functionality to combine or bundle multiple Html template files
  2. Injects HTML templates as with <script type=”script/template”> {Template Content} </script>
  3. It enables Enable bundle definition via API and configuration file
  4. The script type tag is configurable it can be configured to render any type of template for e.g. Angular ng-template.
  5. The implementation should closely follow the patterns, and integrate with, the ASP.NET Web Optimization library, with the intent of providing a familiar pattern to ASP.NET developer and leverage ASP.NET Web Optimization features, such as caching, wildcard support etc.
  6. Bundle are generated only once the first time is referenced and cached on the server. Subsequent requests will return the copy from cache.
  7. It Provides HTML Helper Extension for Rendering HTML Template Bundles like Styles and Script Bundles.
  8. Bundling HTML Templates via Code or Configuration

Implementation details

There are 2 ways in which bundle is created

1. Code

2. Configuration

Code

Similar to style bundles and script bundles in System.Web.Optimization HTML templates should be bundles together and are in line with API similar to Style and Script Bundles.User will be able to bundle the HTML templates as follows in BundleConfig.cs class

First

Creating of bundle can be explicit by specifying and including the entire HTML template files using the .Include API or it can be Wild Card driven where you specify the wild card for particular URL location

  • Explicitly specifying HTML Template files that need to be included as part of BundleSecond
  • Wild CarThird
  • Explicitly specifying directoryFourth

Configuration
Style and Script bundle can be bundled together using bundle.config file which is available out of the box, but this configuration file is not extensible for bundling HTML template files. So in this case configuration driven HTML template bundling will be achieved using the htmlTemplateBundle.config. The schema for htmlTemplateBundle.config is same as that of the Bundle.config file

Fifth

  • Explicitly specifying HTML Template files that need to be included as part of Bundle
    Seventh
  • Wild Card
    Sixth

 

HTML Template Bundle Rendering

  • For Rendering the Bundle following API will be used
    Eight
    The way the bundle is going to render is it is going to spit out <script type=”script/template”></script>, this script tag is going to have the ID attribute and along with it the content of this script tag will contain the HTML content for the template associated with it.
    Nine
  • Rendering of Bundle with explicit script tag is achieved with help RenderFormat API
    Ten
    Where
    tagFormat – This could be the script tag format like <script type=\”text/ng-template\”id=\”{1}\”>{0}</script>
    Paths – Set of virtual paths for which to generate script template tags
    Example
    Twelve
    HtmlTemplates provide the option of specifying/overriding the Default Tag format through static property
    Thriteen
    This property can be assigned with script tag string format like (“<script type=\”text/ng-template\” id=\”{1}\”>{0}</script>”. So that HtmlTemplates.Render API will use the assigned Script tag format.

Source Code be Downloaded from GitHub

Source Code Sample contains demo using the bundle sample with

  • Code
  • Configuration
  • Angular Templates