c# - ASP.net MVC 应用程序中视图的 Angular.js 路由不起作用

Question

我是 Web 开发的新手，我目前正在尝试通过使用视图和路由以及控制器和服务将我的 UI 保留在 Angular.js 中来分离我的 UI。然而，我正在使用 Web API 从数据库中获取数据。

我试图弄清楚如何使用 Angular.js 而不是使用 Asp.net 的 razor MVC 让视图工作。如果我使用来自 ASP.net MVC Web 应用程序和 api 的默认路由，它可以正常工作，但如果我使用 Angular.js 路由，它将无法正常工作。

1. 我已将我的视图分隔在一个文件夹中并创建了我想要的视图
2. 我已经为单独的视图以及与它们关联的控制器设置了一个带有路由的模块。
3. 我已将应用程序作为 ng-app 指令包含在 html 文件中。

索引.cshtml：

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

            <tbody>
                <tr ng-repeat="dataModel in students">
                    <td style="display:none">{{dataModel.StudentID}}</td>
                    <td> {{dataModel.FirstName}}</td>
                    <td> {{dataModel.LastName}}</td>
                    <td>{{dataModel.Email}}</td>
                    <td>{{dataModel.Address}}</td>
                    <td style="text-align:right; color:white">
                        <span>
                            <span id="save" class="btn btn-primary margin-right-btn"
                                  ng-click="GetStudentByID(dataModel)">
                                Edit
                            </span>
                        </span>
                    </td>
                    <td style="text-align:right; color:white">
                        <span>
                            <span id="save" class="btn btn-danger margin-right-btn"
                                  ng-click="DeleteStudent(dataModel)">
                                Delete
                            </span>
                        </span>
                    </td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>


    </div>
</div>

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

Angular.js 中的控制器：（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);
                });
            }
            else {
                var apiRoute = baseUrl + 'UpdateStudent/';
                var UpdateStudent = CrudService.put(apiRoute, student);
                UpdateStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Updated Successfully");
                        $scope.GetStudents();
                        $scope.Clear();

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

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

应用程序模块（sepView.js）：

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

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

从 Api 检索数据的服务：

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

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

这是 MVC 生成的控制器的样子：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

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

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

这是正在发生的事情：

https://imgur.com/a/nOsilNh

如您所见，angular 无法访问填充视图所需的内容。当我使用 Razor 页面和 MVC 默认路由时，它工作正常。

标签： c#asp.netangularjsasp.net-web-api2ngroute