<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-route.js" type="text/javascript"></script>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TasksIndexCtrl">
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
angular.module('plunker', ['ngRoute'])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/tasks', { templateUrl: '_tasks.html', controller: 'TasksIndexCtrl' })
.when('/task/:id', { templateUrl: '_task.html', controller: 'TaskDetailsCtrl' })
.otherwise({ redirectTo: '/tasks' });
}
])
.controller('TasksIndexCtrl',
function ($scope, $http) {
$http.get('tasks.json').success(
function (data) {
$scope.tasks = data;
}
);
}
)
.controller('TaskDetailsCtrl',
function ($scope, $http, $routeParams) {
$http.get('task-' + $routeParams.id + '.json').success(
function (data) {
$scope.task = data;
}
);
}
);
body {
padding-top: 20px;
}
[{"id":1,"name":"Mow the lawn","description":"If we had a clover lawn, we wouldn't have to keep mowing it","hours":2,"dueBy":"2014-02-11T04:00:00.000Z","assignedTo":"Linus","status":"Not started"},{"id":2,"name":"Buy flowers","description":"Everybody loves flowers","hours":1.5,"dueBy":"2014-02-14T04:00:00.000Z","assignedTo":"Daphne","status":"In progress"},{"id":3,"name":"Repair the toilet","description":"It's leaky","hours":4,"dueBy":"2014-02-10T04:00:00.000Z","assignedTo":"Darwin","status":"Completed"}]
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<thead><tr><th>Task</th><th>Assigned to</th><th>Status</th></tr></thead>
<tbody>
<tr ng-repeat="task in tasks">
<td><a href='#/task/{{task.id}}'>{{task.name}}</a></td>
<td>{{task.assignedTo}}</td>
<td>{{task.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<a href="#/tasks"><i class="glyphicon glyphicon-arrow-left"></i> Back to task list</a>
<h1>{{task.name}}</h1>
<dl>
<dt>Description</dt><dd>{{task.description}}</dd>
<dt>Assigned to</dt><dd>{{task.assignedTo}}</dd>
<dt>Due by</dt><dd>{{task.dueBy | date:'EEE, dd MMM yyyy'}}</dd>
<dt>Status</dt><dd>{{task.status}}</dd>
</dl>
{"id":1,"name":"Mow the lawn","description":"If we had a clover lawn, we wouldn't have to keep mowing it","hours":2,"dueBy":"2014-02-11T04:00:00.000Z","assignedTo":"Linus","status":"Not started"}
{"id":2,"name":"Buy flowers","description":"Everybody loves flowers","hours":1.5,"dueBy":"2014-02-14T04:00:00.000Z","assignedTo":"Daphne","status":"In progress"}
{"id":3,"name":"Repair the toilet","description":"It's leaky","hours":4,"dueBy":"2014-02-10T04:00:00.000Z","assignedTo":"Darwin","status":"Completed"}