SImple AngularJS 路由示例无效

Question

我在angularjs中写了一个简单的路由示例。我不知道为什么它不起作用？没有收到任何错误消息。进入页面后，我只从 h1 header.

收到 'A-Mail' 消息

index.html

<!DOCTYPE html>
<html ng-app="AMail">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="controller.js"></script>
        <title>A-Mail</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>A-Mail</h1>
        <div ng-view></div>
    </body>
</html>

list.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 ng-href="#/view/{{message.id}}">{{message.subject}}</a></td>
        <td>{{message.date}}</td>
    </tr>
</table>

detail.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>
<div>{{message.message}}</div>
<a href="#/">Back</a>

controller.js

var aMailServices = angular.module('AMail', []);

function emailRouteConfig($routeProvider) {
    $routeProvider.
    when('/', {
        controller: ListController,
        templateUrl: 'list.html'
    }).
    when('/view/:id', {
        controller: DetailController,
        templateUrl: 'detail.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}

aMailServices.config(emailRouteConfig);

messages = [{
    id: 0,
    sender: 'some@mail.com',
    subject: 'asdasd',
    date: 'Dec 8, 2012 12:12:12',
    recipients: ['one@mail.com'],
    message: 'asdasd'+
        'asdasd'
}, {
    id: 1,
    sender: 'some@mail.com',
    subject: 'asdasd',
    date: 'Jan 12, 2013 23:12:45',
    recipients: ['one@mail.com'],
    message: 'asdasd'+
        'asdasd'
}, {
    id: 2,
    sender: 'some@mail.com',
    subject: 'asdasd',
    date: 'Apr 12, 2015 19:19:34',
    recipients: ['one@mail.com'],
    message: 'asdasd'+
        'asdasd'
}];

function ListController($scope) {
    $scope.messages = messages;
}

function DetailController($scope, $routeParams) {
    $scope.message = messages[$routeParams.id];
}

有人知道吗？

Answer 1

我想你可能只需要依赖项 'ngRoute'

... 
angular.module('AMail', ['ngRoute']);
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>

SImple AngularJS 路由示例无效

SImple AngularJS Route example didnt work

angularjs

routes

angularjs-routing