angularjs路由不适合我

时间:2014-08-18 20:08:19

标签: angularjs-routing

请帮帮我。

Here is my code

使用Javascript:

        var myMailMod = angular.module('myMail', []);

    function configView($routeProvider)
    {
        $routeProvider.
        when('/', {
            templateUrl: 'list.html',
            controller: 'ListController'
        }).
        when('/view/:id', {
            templateUrl: 'details.html',
            controller: 'DetailsController'
        }).
        otherwise({ redirectTo: '/' });
    }

    myMailMod.config(configView);

    var messages = [
        {
            id:0, sender: 'mahshad', date:'14/8/2014',
            recipients: ['missprogrammer@yahoo.com', 'test@gmail.com'],
            subject: 'salam', text: 'salam shaghaliiiiii khobi? :x'
        },
        {
            id:1, sender: 'enayat', date:'16/8/2014',
            recipients: ['aryanpour1990@gmail.com'],
            subject: 'salam', text: 'khobam to khobi? che khabar?!'
        },
        {
            id:2, sender: 'nooshin', date:'18/8/2014',
            recipients: ['nooshin@yahoo.com'],
            subject: 'salam', text: 'salam chetoriah? hahaha :)'
        }
    ];

    myMailMod.controller('ListController', function($scope)
    {
        $scope.messages = messages;
    });

    myMailMod.controller('DetailsController', function($scope, $routeParams)
    {
        $scope.message = messages[$routeParams.id];
    });

HTML(1):              

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>myMail app</h1>
    <div ng-view></div>
  </body>

</html>

HTML(2):

<div>sender: {{messages.sender}}</div>
<div>date: {{messages.date}}</div>
<div>from: <span ng-repeat="recipient in messages.recipients">{{recipient}}</span></div>
<div>subject: {{messages.subject}}</div>
<div>{{messages.text}}</div>

HTML(3):

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

我该怎么办?

0 个答案:

没有答案