AngularJS templates with MVC

Question

I am writing an AngularJS directive that uses a templateURL i.e.

m.directive('mySavingIndicator', function () {
    return {
        restrict: 'E',
        templateUrl: '/views/templates/savingindicator.html'
    };
});

I have created a plain old .html file within the views/templates directory but everytime I run this code MVC throws a null reference exception like its trying to find a controller for it (which doesnt exist). How do I stop MVC trying to treat this as a cshtml file, or how do I make it treat it as a cshtml file but not require a controller? It seems wasteful writing a controller just for these small templates?

Answer 1

MVC normally prevents any content files from being served from the Views folder (the Views folder is special).

However, you can change this by tweaking your web.config.

Change this:

<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode"    type="System.Web.HttpNotFoundHandler" />

To this:

<add name="BlockViewHandler" path="*.cshtml" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

Example:

<handlers>
  <add name="JavaScriptHandler" path="*.js" verb="*"
     preCondition="integratedMode" type="System.Web.StaticFileHandler" />      
  <add name="HtmlScriptHandler" path="*.html" verb="*"
     preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <remove name="BlockViewHandler"/>
  <add name="BlockViewHandler" path="*.cshtml" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>

That way, only cshtml files are blocked from being served directly (html files are left alone).