Question

我正在我的MVC应用程序中创建一个迷你水疗中心我已经配置了我的角度路线，但它似乎不起作用。当我在浏览器地址栏上键入http://localhost:81/Registration/时，会显示注册索引页面。此外，当我点击超链接浏览课程和教师时，它会相应地进行渲染。但由于某些原因，数据无法呈现。当我查看源代码时，我看到以下错误。

A public action method &#39;Courses&#39; was not found on controller &#39;AngularJSMvcExample.Controllers.RegistrationController&#39;.

我觉得MVC路线占优势。为什么在registrationController中查找Courses动作方法。注册控制器只有索引方法。

以下是我的代码

registrationModule

var registrationModule = angular.module("registrationModule", [])
    .config(function ($routeProvider, $locationProvider) {

        $routeProvider.when('/Registration/Courses', { templateUrl: '/templates/courses.html', controller: 'CoursesController' });
        $routeProvider.when('/Registration/Instructors', { templateUrl: '/templates/instructors.html', controller: 'InstructorsController' });
        $locationProvider.html5Mode(true);
    });

MVC注册控制器调用的索引视图。它包含两个指向Browse的链接，它应该调用相关的角度视图并在下面的ng-view部分显示它。

@model AngularJSMvcExample.Models.RegistrationVm

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

@section JavascriptInHead {

    <script src="~/Scripts/courses/courses-controller.js"></script>
    <script src="~/Scripts/instructors/instructors-controller.js"></script>
    <script type="text/javascript">
    registrationModule.factory('bootstrappedData', function() {
        return {
            courses:  @Html.Raw(Html.Encode(Model.Courses).Replace("'","")),
            instructors:  @Html.Raw(Html.Encode(Model.Instructors).Replace("'",""))
            };

    });
</script>

}



<div class="container">


    <div class="row">
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <ul class="nav navbar-nav">
                    <li>
                        <span class="navbar-brand">Registration</span>
                    </li>

                </ul>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav nav-bar">
                    <li> <span class="navbar-brand"><a href="/Registration/Courses">Browse Catalog</a></span></li>
                    <li> <span class="navbar-brand"><a href="/Registration/Instructors">Browse Instructors</a></span></li>
                </ul>
            </div>
        </div>
    </div>


    <div ng-view></div>

</div>

需要在上面的ng-view部分中呈现的html页面中的angular Courses视图

<div class="row">
    <div class="span10">
        <table class="table table-condensed table-hover">
            <tr>
                <th>Course</th>
                <th>Course Name</th>
                <th>Instructor</th>

            </tr>
            <tr ng-repeat="course in courses">
                <td>{{course.number}}</td>
                <td>{{course.name}}</td>
                <td>{{course.instructor}}</td>
            </tr>
        </table>
    </div>
</div>

需要在上面的ng-view部分中呈现的html页面中的角度教师视图

<div class="row">
    <div class="span10">
        <table class="table table-condensed table-hover">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Room No</th>

            </tr>
            <tr ng-repeat="instructor in instructors">
                <td>{{instructor.name}}</td>
                <td>{{instructor.email}}</td>
                <td>{{instructor.roomno}}</td>
            </tr>
        </table>
    </div>
</div>

Answer 1

http://localhost:81/Registration/

需要http://localhost:81/#/Registration才能适应AngularJS的指南。这适合旧版浏览器的交叉兼容性。您可以通过在头标记之间添加基础href标记来覆盖它。您还需要添加此

$ locationProvider.html5Mode（真）;

到AngularJS的应用程序配置要知道它应该在HTML5模式下运行，允许您使用没有＃符号的路由。

虽然在AngularJS应用程序中使用HTML5时进行测试时要小心，但这样做会有一些怪癖。您的路径文件现在可能需要使/＃/ route正确导航，因为在AngularJS中使用HTML5模式实际上只是欺骗地址栏并且仍在内部使用＃符号。

Angular Route无法正常工作。单页面应用程序

1 个答案: