angular-django-rest-resource
Version:
An AngularJS module that provides a resource-generation service similar to ngResource, but optimized for the Django REST Framework.
55 lines (50 loc) • 1.84 kB
HTML
<html>
<head>
<title>Angular Django REST Resource Text</title>
<style>
.organism-box {
display: inline;
background-color: lightgray;
margin: 3px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script type="text/javascript" src="/angular-django-rest-resource.js"></script>
<script type="text/javascript">
angular.module('app', ['djangoRESTResources']);
function DJTestCtrl($scope, djResource) {
var Animal = djResource('/animals/:id/', {'id': "@id"});
var Plant = djResource('/plants/:id/', {'id': "@id"});
$scope.animals = Animal.query();
$scope.plants = Plant.query();
$scope.newPlant = new Plant;
}
</script>
</head>
<body ng-app="app" ng-controller="DJTestCtrl">
Animals retrieved from the server so far: ({{ animals.length }}):
<ul>
<li ng-repeat="animal in animals" class="organism-box">{{animal.common_name}}</li>
</ul>
Plants retrieved from the server so far: ({{ plants.length }}):
<ul>
<li ng-repeat="plant in plants" class="organism-box">{{plant.common_name}}</li>
</ul>
<form ng-submit="newPlant.$save()">
<fieldset>
<legend>Add a plant</legend>
<input ng-model="newPlant.common_name" />
<input ng-model="newPlant.scientific_name" />
<button type="submit">Create!</button>
</fieldset>
</form>
<form ng-submit="plants[0].$save()">
<fieldset>
<legend>Edit a plant</legend>
<input ng-model="plants[0].common_name" />
<input ng-model="plants[0].scientific_name" />
<button type="submit">Update!</button>
</fieldset>
</form>
</body>
</html>