To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

angularjs ngRoute demo 

<!doctype html>
<html lang="en" ng-app="AMail">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-route.js"></script>
</head>
<body>
    <h1>A - Mail</h1>
    <div ng-view></div>
    <script type="text/ng-template" id="detail.html">
        <div><strong>Subject:</strong>{{message.subject}}</div>
        <div><strong>Sender:{{message.sender}}</strong></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 to message list</a>
    </script>
    <script type="text/ng-template" id="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>
    </script>
    <script>
        var aMailServices = angular.module('AMail', ['ngRoute']);
        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: '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 '}, {
        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."}];

            function ListController($scope) {
                $scope.messages = messages;
            }
            function DetailController($scope, $routeParams) {
                $scope.message = messages[$routeParams.id];
            }
    </script>
</body>
</html>

 

posted on 2014-04-02 15:35  Ijavascript  阅读(663)  评论(0)  编辑  收藏  举报