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
– Aleksandar Gajic, Commented Jun 17, 2015 at 21:31
Have you seen the following post: stackoverflow.com/questions/17949460/… — David Tansey
– David Tansey, Commented Jun 17, 2015 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. stackoverflow.com/a/6205076/408747 — Raul Nohea Goodness
– Raul Nohea Goodness, Commented Jun 17, 2015 at 21:43

Community · Accepted Answer · 2017-05-23 11:58:32Z

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, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 17, 2015 at 22:43

Raul Nohea Goodness

2,57923 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

404 when converting asp.net mvc app to angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related