-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathapp.html
120 lines (105 loc) · 4.39 KB
/
app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
<meta charset="utf-8">
<title>CRUD</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-cookies.js"></script>
<script>
angular.module("myApp", ["ngResource"])
.factory('Document', function ($resource) {
return $resource('/api/document/', {}, {
update: {
method: 'PUT',
params: {
id: '@_id'
}
}
});
});
/**
* Document list controller.
* @param $scope
* @param Document
* @constructor
*/
function ListCtrl ($scope, Document) {
var documents = Document.query(function () {
$scope.documents = documents;
}, function ($http) {
// Something went wrong and we should inspect $http to find out what.
console.log('Couldn\'t get document.');
});
// Read a document.
$scope.readDocument = function (index) {
var documentAtIndex = documents[index];
var id = documentAtIndex._id;
// Send GET request to the back end.
var document = Document.get({id: id}, function () {
if (document) {
$scope.expandedDocument = document;
}
}, function ($http) {
// Something went wrong and we should inspect $http to find out what.
console.log('Couldn\t get document.');
})
};
// Create a document.
$scope.createDocument = function () {
var document = new Document({
date: new Date()
});
// Send POST request to the back end.
document.$save(function (data) {
documents.push(data);
}, function ($http) {
// Something went wrong and we should inspect $http to find out what.
console.log('Couldn\'t save document.');
});
};
// Delete a document.
$scope.deleteDocument = function (index) {
var document = documents[index];
var id = document._id;
// Send DELETE request to the back end.
Document.delete({id: id}, function () {
documents.splice(index, 1);
}, function ($http) {
// Something went wrong and we should inspect $http to find out what.
console.log('Couldn\'t save document.');
});
};
// Update document.
$scope.updateDocument = function (index) {
var document = documents[index];
// Update the date of last update.
document.date = new Date();
// Send UPDATE request to the back end.
Document.update(document, function (data) {
documents[index] = data;
}, function ($http) {
// Something went wrong and we should inspect $http to find out what.
console.log('Couldn\'t save document.');
});
}
}
</script>
</head>
<body>
<div ng-controller="ListCtrl">
<button type="button" ng-click="createDocument()">Create a new document</button>
<ul>
<li ng-repeat="document in documents">
<span>Document {{document._id}} last updated on {{document.date}}</span>
<button type="button" ng-click="readDocument($index)">Read</button>
<button type="button" ng-click="updateDocument($index)">Update</button>
<button type="button" ng-click="deleteDocument($index)">Delete</button>
</li>
</ul>
<div ng-show="expandedDocument"><!-- Show div only if expandedDocument isn't null. -->
Read document with ID {{expandedDocument._id}} last modified on {{expandedDocument.date}}.
</div>
</div>
</body>
</html>