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