404 when converting asp.net mvc app to angularjs

Question

so I have my full asp.net mvc project working which renders perfectly fine.

Then I am trying to convert it to use angular for the UI and web api for the backend.

In the views folder I added an index.html file with this code:

<!--
* INSPINIA - Responsive Admin Theme
* Version 2.0
*
-->

<!DOCTYPE html>
<html ng-app="inspinia">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page title set in pageTitle directive -->
    <title page-title></title>

    <!-- Font awesome -->
    <link href="~/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">

    <!-- Main Inspinia CSS files -->
    <link href="~/Content/animate.css" rel="stylesheet">
    <link id="loadBefore" href="~/Content/style.css" rel="stylesheet">


</head>

<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used in Inspinia theme on diferent view -->
<body ng-controller="MainCtrl as main">

    <!-- Main view  -->
    <div ui-view></div>

    <!-- jQuery and Bootstrap -->
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/plugins/jquery-ui/jquery-ui.js"></script>
    <script src="~/Scripts/bootstrap/bootstrap.min.js"></script>

    <!-- MetsiMenu -->
    <script src="~/Scripts/plugins/metisMenu/jquery.metisMenu.js"></script>

    <!-- SlimScroll -->
    <script src="~/Scripts/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Peace JS -->
    <script src="~/Scripts/plugins/pace/pace.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="~/Scripts/app/inspinia.js"></script>

    <!-- Main Angular scripts-->
    <script src="~/Scripts/angular/angular.min.js"></script>
    <script src="~/Scripts/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
    <script src="~/Scripts/angular-translate/angular-translate.min.js"></script>
    <script src="~/Scripts/ui-router/angular-ui-router.min.js"></script>
    <script src="~/Scripts/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script src="~/Scripts/plugins/angular-idle/angular-idle.js"></script>

    <!--
     You need to include this script on any page that has a Google Map.
     When using Google Maps on your own site you MUST signup for your own API key at:
     https://developers.google.com/maps/documentation/javascript/tutorial#api_key
     After your sign up replace the key in the URL below..
    -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQTpXj82d8UpCi97wzo_nKXL7nYrd4G70"></script>

    <!-- Anglar App Script -->
    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/config.js"></script>
    <script src="~/Scripts/translations.js"></script>
    <script src="~/Scripts/directives.js"></script>
    <script src="~/Scripts/controllers.js"></script>

</body>
</html>

However I get a 404 when I try to browse to /views/index.html

So I suppose MVC restricts in some way to see html files on this folder. Whats the solution here?

This looks like routing problem in MVC, its not problem with angularjs, try to create static html page and open it, i assume it will return you same 404 error. — Aleksandar Gajic, Jun 17 '15 at 21:31
Have you seen the following post: http://stackoverflow.com/questions/17949460/how-do-you-request-static-html-files-under-the-views-folder-in-asp-net-mvc — David Tansey, Jun 17 '15 at 21:43
MVC pattern means the controller takes requests and renders views. You are trying to bypass that and the Views/web.config prevents that. http://stackoverflow.com/a/6205076/408747 — Raul Nohea Goodness, Jun 17 '15 at 21:43
With the previous comment's caveat, you [can](http://stackoverflow.com/a/24789089/304683) — EdSF, Jun 17 '15 at 21:49

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

MVC pattern means the controller takes requests and renders views. You are trying to bypass that and the Views/web.config prevents that.

You can either

render your view via the Controller (MVC-style), or configure a
section of your app to serve static files

edited May 23 '17 at 11:58

Community

1
1

answered Jun 17 '15 at 22:43

Raul Nohea Goodness

2,549
23
24

404 when converting asp.net mvc app to angularjs

1 Answers1