无法在“角度”中显示视图

Not able to display view in Angular

本文关键字：显示 视图 角度      更新时间：2023-09-26

使用以下代码我无法显示任何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" });
        });
    })();

控制器.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>

在您的网页正文中，似乎缺少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服务的配置随之更改。

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

它可以在线完成，也可以使用ng include:

<div ng-include="boardView.html"></div>
相关文章：