c# - 使用 Angular.js 路由将 UI 视图与 ASP.net Razor 分离的问题

Question

使用指令解决。

我正在尝试将 UI 与当前使用 Razor 页面 (.cshtml) 来呈现视图的 ASP.net Web 应用程序分开。我希望客户端视图完全由 Angular.js 使用 ng-view 指令处理。我在 StudentForm.html 中创建了一个视图，这是我想在我的 Index.html 文件中注入的表单，以便以后可以重新使用它。但是，这没有按预期工作，我收到以下错误：

HTTP404: NOT FOUND - 服务器没有找到与请求的 URI（统一资源标识符）匹配的任何内容。(XHR)GET - http://localhost:61424/Views/StudentForm.html

1. 我尝试根据我的项目结构将文件移动到不同的文件夹。
2. 我已确保在尝试注入视图的 .html 文件底部包含脚本引用。

索引.cshtml：

<div ng-app="myApp">
    <div ng-controller="StudentCtrl">

        <!--The view for the form goes here-->
        <div ng-view></div>

    </div>
</div>

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/ScriptsNg/Module/sepView.js"></script>
<script src="~/ScriptsNg/Controller/StudentCtrl.js"></script>
<script src="~/ScriptsNg/Service/CrudService.js"></script>

我的应用模块：（sepView.js）：

var sepView = angular.module('myApp', ['ngRoute']);

sepView.config(function
    ($routeProvider) {
    $routeProvider
        .when('/', {
            controller:
                'StudentCtrl',
            templateUrl:
                'Views/StudentForm.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

StudentForm.html 只包含表单，所以我不会包含它。

StudentCtrl.js：

sepView.controller('StudentCtrl', ['$scope', 'CrudService',
    function ($scope, CrudService) {

        // Base Url 
        var baseUrl = '/api/StudentAPI/';
        $scope.btnText = "Save";
        $scope.studentID = 0;
        $scope.SaveUpdate = function () {
            var student = {
                FirstName: $scope.firstName,
                LastName: $scope.lasttName,
                Email: $scope.email,
                Address: $scope.address,
                StudentID: $scope.studentID
            }
            if ($scope.btnText == "Save") {
                var apiRoute = baseUrl + 'SaveStudent/';
                var saveStudent = CrudService.post(apiRoute, student);
                //Callback to check what kind of response we received:

                saveStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Saved Successfully");
                        $scope.GetStudents();
                        $scope.Clear();

                    } else {
                        alert("Some error");
                    }

                }, function (error) {
                    console.log("Error: " + error);
                });
            }

CrudService.js：

sepView.service('CrudService', function ($http) {

    var urlGet = '';
    this.post = function (apiRoute, Model) {
        var request = $http({
            method: "post",
            url: apiRoute,
            data: Model
        });
        return request;
    }

返回视图的 StudentController：

namespace CRUDOperations.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult viewAllStudents() {
            return View();
        }
    }
}

https://imgur.com/a/jAfnnT6

这是项目文件夹结构。我在掌握从使用 ASP.net 路由和视图到使用 Angular.js 进行路由和视图的飞跃时遇到了很多麻烦。如果有人可以向我指出一些关于此的文章，那可能会有所帮助！

标签： c#angularjsasp.net-mvc