Question

我正在尝试在书中重现AngularJS应用程序的示例。我的问题：当我继续使用index.html时，没有任何反应，我在index.html上被重定向＃/ 我不明白...... 谢谢

的index.html

<html ng-app="AMail">
    <head>
        <meta charset="utf-8">
        <title>Title...</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/custom.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
        <script src="js/controllers.js"></script>
    </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 href="#/view/{{message.id}}">{{message.subject}}</a></td>
        <td>{{message.date}}</td>
    </tr>
</table>

Controller.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){
    $routeProvider.
    when('/', {
        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('/view/:id', {
        controller: DetailController,
        templateURL: 'detail.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}

// 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.'
    }, {
        id: 1, sender: 'maria@somecompany.com',
        subject: 'Where did you leave my laptop?',
        date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
        message: 'I thought you were going to put it in my desk drawer.'
        +'But it does not seem to be there.'
    }, {
        id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
        date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
        message: 'Nobody panic, but my pet python is missing from her cage.'
        +'She doesn\'t move too fast, so just call me if you see her.'
    }
];

// 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];
}

谢谢

Answer 1

在Controller.js文件中使用templateUrl函数而不是templateURL。

Official $routeProvider docs

Answer 2

我首先要升级你正在使用的angularjs的版本。只需更改标签即可

到

然后开始测试没有参数的视图，以查看该行为是否仍然存在。

AngularJS路由奇怪的行为

2 个答案: