1

我正在尝试在我的 AngularJS 书籍 PDF 中重现路由示例。无法使其正常工作，我复制/粘贴了书中的代码以避免语法错误......但我不明白出了什么问题。

当我加载时，http://127.0.0.1:8080/routes/我应该看到“index.html”的内容和 list.html“inside”的内容。

但我只看到一个带有“A-Mail”的空白页面（index.html 的内容）

我已经使用 chrome 调试工具设置了一些断点，似乎我进入了routeProviderwhen('/routes/')的“ ”部分，但从未进入ListController函数......我在控制台日志中没有错误

控制器.js

    // Creates a module for our core AMail services
var aMailServices = angular.module('AMail', []);

// Set up our mappings between URLs, templates, and controllers
function emailRouteConfig($routeProvider,$locationProvider){
    $routeProvider.
    when('/routes/', {
        controller: ListController,
        templateURL: 'list.html'
    }).
    // Notice that for the detail view, we specify a parameterized URL component
    // by placing a colon in front of the id
    when('/routes/view/:id', {
        controller: DetailController,
        templateURL: 'detail.html'
    }).
    otherwise({
        redirectTo: '/routes/'
    });
    $locationProvider.html5Mode(true).hashPrefix('!');
}

// Set up our route so the AMail service can find it
aMailServices.config(emailRouteConfig)

// Some fake emails
messages = [{
        id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
        date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
        message: 'Hey, we should get together for lunch sometime and catch up.'
        +'There are many things we should collaborate on this year.'
    }
];

// Publish our messages for the list template
function ListController($scope){
    $scope.messages = messages;
}

// Get the message id from the route (parsed from the URL) and use it to
// find the right message object
function DetailController($scope, $routeParams){
    $scope.message = messages[$routeParams.id];
}

索引.html

<html ng-app="AMail">
    <head>
        <meta charset="utf-8">
        <title>Title...</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <h1>A-Mail</h1>
        <div ng-view></div>
    </body>
</html>

详细信息.html

<div><strong>Subject: </strong>{{message.subject}}</div>
<div><strong>Sender: </strong>{{message.sender}}</div>
<div><strong>Date: </strong>{{message.date}}</div>
<div>
    <strong>To:</strong>
    <span ng-repeat='recipient in message.recipients'>{{recipient}}</span>
    <div>{{message.message}}</div>
    <a href='#/'>Back to message list</a>
</div>

列表.html

<table>
    <tr>
        <td><strong>Sender</strong></td>
        <td><strong>Subject</strong></td>
        <td><strong>Date</strong></td>
    </tr>
    <tr ng-repeat="message in messages">
        <td>{{message.sender}}</td>
        <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
        <td>{{message.date}}</td>
    </tr>
</table>

谢谢

4

1 回答 1

2

正如您在官方文档中看到的那样，我认为您应该templateUrl使用templateURL.

于 2013-09-04T17:17:00.223 回答