AngularJS（路由）/MVC 应用程序的 templateUrl 从不加载模板

Question

我们正在尝试使用在教程网站和其他网站上找到的各种 link 创建一个 MVC/AngularJS 迷你 SPA 网站，例如：。但是，每次单击 link 似乎都会加载整个页面，并且永远不会加载模板。我确信我遗漏了一些简单的东西，但无法弄清楚。

我的 _Layout.cshtml 看起来像：

<!DOCTYPE html>
<html ng-app="registrationModule">
<head>
    <meta charset=" utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")


    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-resource.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>

    <script src="~/GrextScripts/registration-module.js"></script>

    <script src="~/GrextScripts/user-repository.js"></script>
    <script src="~/GrextScripts/user-controller.js"></script>

    @RenderSection("SectionInHeader", required: false)

</head>
<body>
    <header>
        <div class=" content-wrapper">
            <div class="float-left">
                <p class="site-title">
                    <a href="~/">GREXT</a>
                </p>
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li><a href="~/ControlPanel/">Home</a></li>
                        <li><a href="~/ControlPanel/Users">Users</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    @RenderBody()

    @RenderSection("scripts", required: false)
</body>
</html>

ControlPanel/Index.cshtml（{{5+5}} 在页面上正确呈现为“10”，这只是为了查看 AngularJS正在工作

@{

}


<div ng-view>
    {{5+5}}
</div>

报名-module.js

var registrationModule = angular.module("registrationModule", ["ngRoute", "ngResource"])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider.when("/ControlPanel/Users", {
            templateUrl: "/templates/users/all.html",
            controller: "userController"
        });

        $locationProvider.html5Mode(true);
    });

用户-controller.js

registrationModule.controller("UserController", function($scope, userRepository, $location) {
    $scope.users = userRepository.get();
});

最后，模板：/templates/users/all.html

{{1+1}}
<table>
    <tr><td>User Name</td></tr>
    <tr ng-repeat="user in users">
        <td>{{user.UserName}}</td>
    </tr>
</table>

如前所述，当我单击页面中的用户 link 时，整个页面会重新加载，但模板 all.html 并没有像我预期的那样加载。

Answer 1

不确定，但问题可能在于您将控制器声明为 "UserController" 且大写 "U"，但在 routeProvider 中您将其指定为小写 "u" 作为 "userController"。

我猜你的控制台有错误，所以你可能想在那里检查一下。

将 routeProvider 更改为使用 "UserController" 而不是 "userController"，它应该可以工作。

Answer 2

@aaronfrost 的评论让我更彻底地重新检查了我的 javascript 控制台，发现我需要包含一个

<base href="/" />

在我文档的标签中。添加它会导致一切正常。

AngularJS（路由）/MVC 应用程序的 templateUrl 从不加载模板

templateUrl for AngularJS (routing)/MVC application never loads templates

angularjs

asp.net-mvc

angularjs-ng-repeat

angular-resource