Javascript 面向初学者的AngularJS路由_Javascript_Angularjs_Angular Routing

Javascript 面向初学者的AngularJS路由

javascript angularjs

Javascript 面向初学者的AngularJS路由,javascript,angularjs,angular-routing,Javascript,Angularjs,Angular Routing,我试图在我的AngularJS书籍PDF中重现路由示例。由于无法使其正常工作，我不得不在书中复制/粘贴代码以避免语法错误。。。但我不明白怎么了当我加载http://127.0.0.1:8080/routes/我应该看到“index.html”的内容和“inside”的list.html的内容但是我只看到一个带有“a-Mail”（index.html的内容）的blamk页面我用chrome调试工具设置了一些断点，似乎我在routeProvider的“when（'/routes/'）”部分输入

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

当我加载

http://127.0.0.1:8080/routes/

我应该看到“index.html”的内容和“inside”的list.html的内容

但是我只看到一个带有“a-Mail”（index.html的内容）的blamk页面

我用chrome调试工具设置了一些断点，似乎我在routeProvider的“

when（'/routes/'）

”部分输入了断点，但从未在ListController函数中输入过断点。。。我在控制台日志中没有错误

controllers.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];
}

index.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>

<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>

<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>


标题
音频邮件

detail.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>

<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>

<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>

主题：{{message.Subject}
发件人：{{message.Sender}
日期：{{message.Date}
至：
{{recipient}}
{{message.message}

list.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>

<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>

<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>


发送方
主题
日期
{{message.sender}
{{message.date}

谢谢

正如您所看到的，我认为您应该使用

templateUrl

而不是

templateUrl

您的服务器是否支持

HTML5模式

？