CODEWITHSUNDEEP
javascripthtmlvisual-studiovisual-studio-2012angularjs
Mike Barlow - BarDev
Mike Barlow - BarDev

Reputation: 11267

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

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>

Upvotes: 10

Views: 2734

Answers (3)

Weej
Weej

Reputation: 1022

Using Trey Mack's answer I wasn't able to get listings of css classes in class="".

However, by changing the tag type to text/html and modifying the app.run I'm getting syntax and CSS class name listings.

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

then...

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/html"]').each(function(idx, el) {
        $templateCache.put(el.id, el.innerHTML);
    });
});

P.S. I'm using VS 2015

Upvotes: 1

Kugel
Kugel

Reputation: 19814

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.

Upvotes: 2

Trey Mack
Trey Mack

Reputation: 4695

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>

Upvotes: 4

Related Questions