#Angular Resource Tastypie RESTful AngularJs client for Django-Tastypie or equivalent schema.
1. Pagination 2. Complete CRUD 3. Abstract AJAX(J) providing operations which are similar to the [Django Model API](https://docs.djangoproject.com/en/dev/topics/db/queries/)##Context
RESTful architecture with AngularJs and Django.
##Requirements
- Frontend: AngularJs 1.3+
- Backend: Django-Tastypie or equivalent schema.
##Usage
angular.module('myApp', ['ngResourceTastypie'])
.config(function($tastypieProvider){
$tastypieProvider.setResourceUrl('http://127.0.0.1:8001/api/v1/');
$tastypieProvider.setAuth('admin','320c4e7da6ed93946f97f51e6f4c8354a098bb6e');
})
.controller('MyCtrl', ['$scope', '$tastypieResource', function($scope, $tastypieResource){
$scope.Service = new $tastypieResource('service', {limit:5});
$scope.Service.objects.$find();
}]);angular.module('myApp', ['ngResourceTastypie']).config(function($tastypieProvider){
$tastypieProvider.setResourceUrl('http://127.0.0.1:8001/api/v1/');
$tastypieProvider.setAuth('admin','320c4e7da6ed93946f97f51e6f4c8354a098bb6e');
}).controller('MyCtrl', ['$scope', '$tastypieResource', function($scope, $tastypieResource){
...
}]);This api_key was fixed only for demo purposes.
You must generate a dynamic api_key after the user login, on backend authorization system, and then configure this attribute.
With django-tastypie this task is quite simple:
http://django-tastypie.readthedocs.org/en/latest/authentication.html
//Access $tastypieProvider in the controller
//Login sample:
.controller('LoginCtrl', ['$scope', '$tastypie', '$http', function($scope, $tastypie, $http){
$scope.login = function(){
var data = {
userName: $scope.userName,
password: $scope.password
}
$http.post('/loginUrl', data).success(response){
$tastypie.setAuth(response.username, response.api_key);
}
}
}]);##Making queries The $tastypieResource class is held responsible for connecting on the specific "list endpoint".
We have a service called "song", which is responsible for providing the "TOP 100 SONGS CLASSIC ROCK": ``` http://127.0.0.1:8001/api/v1/song/ ``` Then: ```javascript $scope.Song = new $tastypieResource('song');//or with default filters $scope.Song = new $tastypieResource('song',{limit:5});
- <h5>Creating objects</h5>
The "$create()" method will return a "$tastypieObjects" object.<br>
The $tastypieObjects class is held responsible for providing the "(C)reate, (R)ead, (U)pdate, (D)elete" methods.
```javascript
$scope.song = $scope.Song.objects.$create();
$scope.song.rank = 1
$scope.song.song = "Sweet Emotion"
$scope.song.artist = "Aerosmith"
$scope.song.$save();
//or
$scope.Song.objects.$create({
rank: 1,
song: "Sweet Emotion",
artist: "Aerosmith"
}).$save();//or with callback
$scope.Song.objects.$create({
rank: 1,
song: "Sweet Emotion",
artist: "Aerosmith"
}).$save().then(
function(result){
console.log(result);
},
function(error){
console.log(error);
}
);After saving, your obj will be updated. For example, your obj now has an "id".. wow!!
$scope.Song.objects.$update({
id:100,
song:'Sweet Emotion ...'
});//or with callback
$scope.Song.objects.$update({
id:100,
song:'Sweet Emotion'
}).then(
function(result){
console.log(result);
},
function(error){
console.log(error);
}
);//or from get
$scope.Song.objects.$get({id:100}).then(
function(result){
result.rank += 1;
result.$save();
}
);//or from local object
//creating
var song = $scope.Song.objects.$create();
song.rank = 1;
song.song = "Sweet Emotion";
song.artist = "Aerosmith";
song.$save();
//updating
song.rank = 2
song.$save();$scope.Song.objects.$delete({id:100});//or with callback
$scope.Song.objects.$delete({id:100}).then(
function(result){
console.log(result);
},
function(error){
console.log(error);
}
);//or from local object
//creating
var song = $scope.Song.objects.$create();
song.rank = 1
song.song = "Sweet Emotion"
song.artist = "Aerosmith"
song.$save();
//deleting
song.$delete()The "$find()" method will return a "$tastypiePaginator" object.
The $tastypiePaginator class is responsible for providing the "pagination control" methods, and the objects list.
//all objects
$scope.Song.objects.$find();//or with filters
$scope.Song.objects.$find({rank__lte:10});//or with callback
$scope.Song.objects.$find({rank__lte:10}).then(
function(result){
console.log(result); //The "result" is a "$tastypiePaginator" object.
},
function(error){
console.log(error);
}
);1. After running the "$find" method for the first time, you have inside your instance "$tastypieResource" ($scope.Song), a "$tastypiePaginator" object ($scope.Song.page).
2. For each item of "$scope.Song.page.objects" you retrieve a "$tastypieObjects" object. ;)
//All page attributes:
$scope.Song.page.meta.previous; // URL of previous page
$scope.Song.page.meta.next; // URL of next page
$scope.Song.page.meta.limit; // Limit of records by page
$scope.Song.page.meta.offset; // Current displacement records
$scope.Song.page.meta.total_count; // Total count of found records.
$scope.Song.page.objects; // Objects ($tastypieObjects) list of current page
$scope.Song.page.index; // Current number page
$scope.Song.page.length; // Pages quantity
$scope.Song.page.range; // Numbers list of pages
//All page methods:
$scope.Song.page.change(index);
$scope.Song.page.next();
$scope.Song.page.previous();
$scope.Song.page.refresh();
$scope.Song.page.first();
$scope.Song.page.last();
//All methods has promise. EX:
$scope.Song.page.next().then(
function(result){
console.log(result); //The "result" is a "$tastypiePaginator" object.
},
function(error){
console.log(error);
}
);//get object from resource_uri
//In this case, there is no paging. An "$tastypieObjects" is returned.
$scope.Song.objects.$get({id:100}).then(
function(result){
console.log(result);
},
function(error){
console.log(error);
}
);##Class Diagram
##Contribute
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RGQ8NSYPA59FL)##License angular-resource-tastypie is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RGQ8NSYPA59FL){kind=link}