Question

我们正在尝试使用教程网站上的各种链接创建MVC / AngularJS mini-SPA网站，其他链接如：AngularJS routing in MVC application with templates。但是，单击链接似乎每次都会加载整个页面，并且永远不会加载模板。我确信我错过了一些简单的东西，但无法弄明白。

我的_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>

如上所述，当我点击页面中的“用户”链接时，整个页面将重新加载，并且模板all.html未按预期加载。

Answer 1

不确定，但问题可能是您使用大写“U”将控制器声明为“UserController”，但在routeProvider中，您使用小写“u”作为“userController”指定它。

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

更改routeProvider以使用“UserController”而不是“userController”，它应该可以工作。

用于AngularJS（路由）/ MVC应用程序的templateUrl永远不会加载模板

1 个答案: