将 asp.net mvc 应用程序转换为 angularjs 时出现 404

404 when converting asp.net mvc app to angularjs

所以我的完整 asp.net mvc 项目正在运行,渲染效果非常好。

然后我尝试将其转换为使用 angular 用于 UI 和网络 api 用于后端。

在 views 文件夹中,我使用以下代码添加了一个 index.html 文件:

<!--
* 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>

但是,当我尝试浏览 /views/index 时收到 404。html

所以我想 MVC 以某种方式限制查看此文件夹中的 html 文件。 这里的解决方案是什么?

MVC 模式意味着控制器接受请求并呈现视图。您正试图绕过它和 Views/web.config prevents that

您可以

  • 通过控制器(MVC 风格)呈现您的视图,或配置一个
  • 您的应用部分 serve static files