Question

使用以下代码我无法显示任何HTML。我在控制台中没有收到任何错误的任何错误。知道我做错了什么吗？

的index.html

<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <script src="libs/angular.min.js"></script>
    <script src="libs/angular-route.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/boards/boardsController.js"></script>
</body>
</html>

app.js

   'use strict';
    var app = angular.module('KanbanBoard', ['ngRoute']);

    (function () {

        app.config(function ($routeProvider) {

            $routeProvider.when("/boards", {
                controller: "BoardsController",
                templateUrl: "/app/boards/boardsView.html"
            });

            $routeProvider.otherwise({ redirectTo: "/boards" });

        });

    })();

controller.js

'use strict';
(function () {
    app.controller('BoardsController', ['$scope', function ($scope) {
        $scope.users;
        this.users = [
                    {
                        id: 0,
                        email: 'a@a.com',
                        name: 'A',
                        surname: 'B',
                        initials: 'AB',
                        boards: [
                            {
                                id: 0,
                                title: 'Welcome Board',
                                description: 'Board sample',
                                isArchived: false,
                            },
                            {
                                id: 1,
                                title: 'Project X',
                                description: 'Project X description',
                                isArchived: false,
                            }
                        ]
                    }
        ];
        $scope = this.users;
    }]);
})();

boardView.html

<div ng-controller="BoardsController as boardsCtrl">
    <div ng-repeat="user in boardsCtrl.users">
        {{user.name + " " + user.surname}}
        <ul>
            <li></li>
        </ul>

    </div>
</div>

Answer 1

在您的网页正文中，您似乎缺少ng-view：

<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <div ng-view></div> <!--this is required.-->

    <script src="libs/angular.min.js"></script>
    <script src="libs/angular-route.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/boards/boardsController.js"></script>
</body>
</html>

来自文档：

ngView是一个指令，通过将当前路由的呈现模板包含到主布局（index.html）文件中来补充$ route服务。每当当前路由发生变化时，包含的视图都会根据$ route服务的配置随之改变。

Answer 2

您错过了在index.html上添加带有控制器的Boardview.html

可以内联或使用ng-include：

完成

<div ng-include="boardView.html"></div>

无法在Angular中显示视图

2 个答案:

来自文档：