Visual Studio - Using Custom Script Tag Type for HTML Templates and Syntax Highlighting

Question

I’m using Visual Studio 2012 to edit HTML and JavaScript. I’m adding templates by using partial views in inline script tags (see code below). AngularJS, a Javascript framework, requires that the type be text/ng-template, but Visual Studio does not recognize it as being HTML and does not provide syntax highlighting. If the type is text/HTML everything works fine.

My question: is there a way in Visual Studio 2012 to associate a custom script type to do HTML syntax highlighting? The solution should work not just for text/ng-template, but for other types where you want HTML syntax highlighting.

<script type="text/ng-template" id="filterOrder.html">
    <!-- Sidebar comment-->
    Search: <input ng-model="query"/> 
    Sort by: 
    <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
    <div id="status">Current filter: {{query}}</div>
</script>

Answer 1

I couldn't convince VS2012 to highlight the text/ng-template scripts, so I resorted to using text/template and added a bit to my startup code. This will enumerate the script tags of whatever type you want and add them to $templateCache.

    var app = angular.module('app', [...]);

    app.run(function ($templateCache) {
        // <script type="text/ng-template"> ... is preferred, but VS 2012 doesn't give intellisense there
        angular.element('script[type="text/template"]').each(function(idx, el) {
            $templateCache.put(el.id, el.innerHTML);
        });
    });

text/template triggers HTML intellisense in my setup.

<script type="text/template" id="home.html">
    <h3>HTML intellisense, code completion, and formatting!</h3>
</script>

Answer 2

This is what I did:

@using (Html.NgTemplate("Text"))
{
    <div class="control-group">
        <label class="control-label">{{item.label}}</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" ng-model="item.value">
        </div>
    </div>
}

Visual studio has no idea that it is a script tag and gives me full auto-complete.