Question

我正在尝试使用Angular教程并遇到一些基础问题。

我有以下目录结构：

index.html
angular.min.js
angular-route.js
app
    views
        customers.html
        orders.html

app / views /文件夹中的文件是模板。在index.html中，我有以下

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="customersApp">
<head>
    <meta charset="utf-8" />
    <title>Angular Test</title>
</head>
<body>
    <div ng-view></div>

    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="angular-route.js"></script>
    <script>
        var app = angular.module('customersApp', ['ngRoute']);

        app.config(function ($routeProvider) {
            $routeProvider
                .when('/',
                {
                    controller: 'CustomersController',
                    templateUrl: 'app/views/customers.html'
                })
                .when('/orders',
                {
                    controller: 'OrdersController',
                    templateUrl: 'app/views/orders.html'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });

        app.controller('CustomersController', function ($scope) {
            $scope.customers = [
                { "id": 1, "name": 'Ted', "total": 5.994 },
                { "id": 2, "name": 'Michelle', "total": 2.994 }
            ];
        });

        app.controller('OrdersController', function ($scope) {
            $scope.customerId = 5;
        });        

    </script>

</body>
</html>

在customers.html中，我有以下内容：

<div ng-controller="CustomersController">
    Search:
    <input type="text" ng-model="searchText" />
    {{ searchText }}


    <h3>Customers: </h3>
    <table>
        <tr ng-repeat="cust in customers | filter:searchText">
            <!-- <td>{{ cust.id }}</td>-->
            <td>{{ cust.name }}</td>
            <td>{{ cust.total | currency }}</td>
        </tr>
    </table>
</div>

鉴于我在index.html中有<div ng-view></div>，我认为Angular会正确地将我路由到customers.html模板，但它会显示一个空屏幕。

我有两个问题：

为什么我的模板不显示？我错过了一些简单的东西吗？
如何调试此问题？我查看了F12工具，看到控制台下没有错误。我已经完成了代码并且没有错误。

P.S。我知道目录结构不是最佳的。

无法显示AngularJS模板

0 个答案: