javascript - 在 angularjs 中找不到 url

Question

我是 webapi 和 angularjs 的新手。我正在尝试开发一个 angular js。我有这个 Controller :

 public class ManageStudentInfoController : Controller
    {
        // GET: ManageStudentInfo
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult AddNewStudent()
        {
            return PartialView("AddStudent");
        }

        public ActionResult ShowStudents()
        {
            return PartialView("ShowAllStudent");
        }

        public ActionResult EditStudent()
        {
            return PartialView("EditStudent");
        }

        public ActionResult DeleteStudent()
        {
            return PartialView("DeleteStudent");
        }
    }

还有这个 webapi Controller :

 public class ManageStudentInfoAPIController : ApiController
    {
        private SchoolManagementEntities db = new SchoolManagementEntities();

        // GET: api/ManageStudentsInfoAPI  
        public IQueryable<Student> GetStudent()
        {
            return db.Students;
        }

        // GET: api/ManageStudentsInfoAPI/5  
        [ResponseType(typeof(Student))]
        public IHttpActionResult GetStudent(int id)
        {
            Student student = db.Students.Find(id);
            if (student == null)
            {
                return NotFound();
            }

            return Ok(student);
        }

        // PUT: api/ManageStudentsInfoAPI/5  
        [ResponseType(typeof(void))]
        public IHttpActionResult PutStudent(int id, Student student)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != student.StudentID)
            {
                return BadRequest();
            }

            db.Entry(student).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!StudentExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/ManageStudentsInfoAPI  
        [ResponseType(typeof(Student))]
        public IHttpActionResult PostStudent(Student student)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Students.Add(student);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = student.StudentID }, student);
        }

        // DELETE: api/ManageStudentsInfoAPI/5  
        [ResponseType(typeof(Student))]
        public IHttpActionResult DeleteStudent(int id)
        {
            Student student = db.Students.Find(id);
            if (student == null)
            {
                return NotFound();
            }

            db.Students.Remove(student);
            db.SaveChanges();

            return Ok(student);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool StudentExists(int id)
        {
            return db.Students.Count(e => e.StudentID == id) > 0;
        }
    }

我在 myscript 文件夹中有这个 js 文件:

模块文件:

var app = angular.module("ApplicationModule", ["ngRoute"]);

app.factory("ShareData", function () {
    return { value: 0 }
});

//Showing Routing  
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    debugger;
    $routeProvider.when('/showstudents',
                        {
                            templateUrl: 'ManageStudentInfo/ShowStudents',
                            controller: 'ShowStudentsController'
                        });
    $routeProvider.when('/addstudent',
                        {
                            templateUrl: 'ManageStudentInfo/AddNewStudent',
                            controller: 'AddStudentController'
                        });
    $routeProvider.when("/editStudent",
                        {
                            templateUrl: 'ManageStudentInfo/EditStudent',
                            controller: 'EditStudentController'
                        });
    $routeProvider.when('/deleteStudent',
                        {
                            templateUrl: 'ManageStudentInfo/DeleteStudent',
                            controller: 'DeleteStudentController'
                        });
    $routeProvider.otherwise(
                        {
                            redirectTo: '/'
                        });

    $locationProvider.html5Mode(true).hashPrefix('!')
}]);

service.js 文件:

app.service("SPACRUDService", function ($http) {

    //Read all Students  
    this.getStudents = function () {

        return $http.get("/api/ManageStudentInfoAPI");
    };

    //Fundction to Read Student by Student ID  
    this.getStudent = function (id) {
        return $http.get("/api/ManageStudentInfoAPI/" + id);
    };

    //Function to create new Student  
    this.post = function (Student) {
        var request = $http({
            method: "post",
            url: "/api/ManageStudentInfoAPI",
            data: Student
        });
        return request;
    };

    //Edit Student By ID   
    this.put = function (id, Student) {
        var request = $http({
            method: "put",
            url: "/api/ManageStudentInfoAPI/" + id,
            data: Student
        });
        return request;
    };

    //Delete Student By Student ID  
    this.delete = function (id) {
        var request = $http({
            method: "delete",
            url: "/api/ManageStudentInfoAPI/" + id
        });
        return request;
    };
});

还有我的 index.html View :

@{
    ViewBag.Title = "SPA";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<body data-ng-app="ApplicationModule">
    <div>
        <div>
            <div>
                <table cellpadding="5" cellspacing="6" width="100%" style="background-color:whitesmoke; border:solid 4px green;">
                    <tr>
                        <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="managestudentinfo/showstudents"> Show All Students </a></td>
                        <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="managestudentinfo/AddNewStudent"> Add New Student </a></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div>
                <div data-ng-view></div>
            </div>
        </div>
    </div>

</body>

@section scripts{
    <script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/Module.js")"></script>
    <script src="~/MyScripts/Services.js"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/ShowStudentsController.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/AddStudentController.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/EditStudentController.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/DeleteStudentController.js")"></script>
}

如果您需要，可以使用其他文件。问题是当我运行项目时，当我转到此 url 时:http://localhost:5411/showstudents 浏览器无法找到网址。

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /showstudents

Answer 1

不要忘记 url 中的“api”:

http://localhost:5411/api/showstudents