Angular factory for restful, simple and easy.
Github projectbower install angular-restful
You can install manually, but is not recommended
<script src="//cdn.jsdelivr.net/angular-restful/current_version/angular-restful.min.js"></script>
Angular-restful depends on the angular, if you don't know how install and config, please go to angular project
angular.module('yourModule', ['restful']);
angular.module('app', ['restful'])
.config(function ($restfulProvider) {
$restfulProvider.url('http://localhost:3000');
$restfulProvider.actions({
list: { method: 'GET', isArray: true, params: { limit: 30} }
});
});
| Name | Type | Default | Description |
|---|---|---|---|
| actions | Object | {'get':{method:'GET'},'query':{method:'GET', isArray:true},'create':{method:'POST'},'update':{method:'PUT'},'destroy':{method:'DELETE'} | These methods are default of resource rails, can be modified before you create restful |
| url | String | "" | Url based of restful |
angular.module('service', ['restful'])
.factory('User', ['$restful', function($restful) {
return $restful('/user', {except:['query']});
}])
.factory('Post', ['$restful', function($restful) {
return $restful('/posts/:id', {params:{id:'@id'}});
}]);
| Name | Type | Default | Description |
|---|---|---|---|
| params | Object | {} | Default values for url parameters. Equals of $resource |
| actions | Object | {} | Hash with declaration of custom action that should extend the default set of restful actions.Equals of $resource ({method:?, params:?, isArray:?}) |
| baseURL | String | null | If you need change override $restful.$baseURL |
| only | Array | null | Add methods default only if have key in this array |
| except | Array | null | Add all methods default except if have key in this array |
angular.module('app', ['service'])
.run(function(User, Post){
var user = new User();
var post = new Post({contet:'Test restful'});
var post = post.$create([user], function(){
post.$destroy(); //DELETE //localhost/user/post/1
}); //POST //localhost/user/post
});
| Name | Type | Default | Description |
|---|---|---|---|
| params | Object | {} | Default values for url parameters. Equals of $resource |
| data | Object | {} | Post data, Equals of $resource |
| resources | Array | null | Array with restful instances, the order of array is important because route follows this orderThis array is extend of result, for resets only set array empty |
| success | Function | null | Function for success in request |
| error | Function | null | Function for error in request |
Simple sample of User, Post, Category CRUD
angular.module('angular-restful', ['angular-restful.service'])
.config(function($httpProvider, $routeProvider) {
var views = './views';
$routeProvider.when('/users', {
templateUrl: views+'/user/list.html',
controller: UserController
}).when('/users/:id_user/posts', {
templateUrl: views+'/post/list.html',
controller: PostController
});
})
.run(function($rootScope, $restful){
$restful.$baseURL = 'http://localhost:3000';
});
function UserController($scope, User){
$scope.users = User.query();
$scope.user = null;
$scope.create = function(){
$scope.user = new User();
};
$scope.cancel = function(){
$scope.user = null;
};
$scope.edit = function( $user ){
$scope.user = $user;
};
$scope.save = function(){
if( angular.isDefined($scope.user.id) ) {
$scope.user.$update(function(){
$scope.user = null;
});
} else {
$scope.user.$create(function( $user ){
$scope.users.unshift($user);
$scope.user = null;
});
}
};
$scope.remove = function( $user ){
$user.$destroy(function(){
$scope.users.splice($scope.users.indexOf($user), 1);
});
};
$scope.cancel = function(){
$scope.user = null;
};
}
function PostController($routeParams, $scope, User, Post, Category){
var id_user = $routeParams.id_user;
var user_current = new User({id: id_user});
$scope.posts = Post.query([user_current]);
$scope.categories = Category.query();
$scope.post = null;
$scope.create = function(){
$scope.post = new Post();
};
$scope.cancel = function(){
$scope.post = null;
};
$scope.edit = function( $post ){
$scope.post = $post;
};
$scope.save = function(){
if( angular.isDefined($scope.post.id) ) {
$scope.post.$update(function(){
$scope.post = null;
});
} else {
$scope.post.$create([user_current], function( $post ){
$scope.posts.unshift($post);
$scope.post = null;
});
}
};
$scope.remove = function( $post ){
$post.$destroy(function(){
$scope.posts.splice($scope.posts.indexOf($post), 1);
});
};
$scope.cancel = function(){
$scope.post = null;
};
}
angular.module('angular-restful.service', ['restful'])
.factory('User', ['$restful', function($restful) {
return $restful('/users/:id', {params:{id:'@id'}});
}])
.factory('Post', ['$restful', function($restful) {
return $restful('/posts/:id', {params:{id:'@id'}});
}])
.factory('Category', ['$restful', function($restful) {
return $restful('/categories/:id', {params:{id:'@id'}});
}]);
<form name="form">
<div class="control-group">
<label>Name</label>
<input type="text" name="name" ng-model="user.name">
</div>
<div class="control-group">
<label>E-mail</label>
<input type="email" name="email" ng-model="user.email">
</div>
<button ng-click="cancel()" class="btn">Cancel</button>
<button ng-click="save()" class="btn btn-primary">Save</button>
</form>
<table>
<thead>
<tr>
<th style="width: 250px">Name</th>
<th style="width: 150px">E-mail</th>
<th style="width: 55px">
<a ng-click="create()"><i class="icon-plus-sign"></i></a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | orderBy:'name'">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>
<a href="#/users/{{user.id}}/posts" data-toggle="tooltip" title="Posts"><i class="icon-list"></i></a>
<a ng-click="edit(user)"><i class="icon-pencil"></i></a>
<a ng-click="remove(user)"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
<form name="form">
<div class="control-group">
<label>Content</label>
<textarea name="content" ng-model="post.content"></textarea>
</div>
<div class="control-group">
<label>Category</label>
<select name="category_id" ng-model="post.category_id">
<option ng-repeat="category in categories" value="{{category.id}}" ng-selected="category.id==post.category_id">{{category.name}}</option>
</select>
</div>
<button ng-click="cancel()" class="btn">Cancel</button>
<button ng-click="save()" class="btn btn-primary">Save</button>
</form>
<table>
<thead>
<tr>
<th style="width: 250px">Content</th>
<th style="width: 150px">Category ID</th>
<th style="width: 55px">
<a ng-click="create()"><i class="icon-plus-sign"></i></a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="post in posts | orderBy:'created_at'">
<td>{{post.content}}</td>
<td>{{post.category_id}}</td>
<td>
<a ng-click="edit(post)"><i class="icon-pencil"></i></a>
<a ng-click="remove(post)"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>