how to load views into an MVC application when using angular

Question

I have a project in which I am loading a view which contains an angular app. Within the angular app I have templates that I am trying to load. Within VS the directory structure shows

/views/reports/library.cshtml

within this directory I have added an html file/template

/views/reports/modal1.html

When I try to reference this html file either through angular or just through the address bar http://localhost/reports/modal1.html or http://localhost/views/reports/modal1.htmlI get a 404 error. It appears that angular is looking to the root of the website but I suspect the asp.net MVC routing is overriding something. I'd like to keep the files together for the app within the "view" directory vs. dumping them in the root. How do I go about loading the html templates within an MVC solution?

Wayne Ellery · Accepted Answer · 2014-12-24 02:08:25Z

1

There is a .webconfig in the views folder which prevents loading static files. Normally, you would not put the angular views in the mvc views. I would create a separate app directory at the root of the project:

/app
    /scripts
        /controllers
        /services
    /views

Another option is to allow for static files in the web.config in the views folder

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

edited Dec 24, 2014 at 2:08

answered Dec 24, 2014 at 1:29

Wayne Ellery

7,9581 gold badge30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rlcrews Over a year ago

the challenge I have is this is not a new project but a phased implementation where I am cutting in SPA's into a hybrid webform/MVC application. It's pretty large to where I would like to keep files together vs. introducing new directories.I'll try the static files approach this looks like it may be the approach to take for this solution.

Wayne Ellery Over a year ago

I can't see a problem with adding another directory for the angular app inside your legacy application. Technically the Views folder is meant for mvc views and that is all

rlcrews Over a year ago

so you propose to create a new directory from the root and add the templates there for the MVC view?

Wayne Ellery Over a year ago

I would normally create an app directory from the root which would be used for the angular app and everything for the app would be nested inside it. I updated my answer as the formatting wasn't the best

Collectives™ on Stack Overflow

how to load views into an MVC application when using angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related