Angular-Restful

Angular factory for restful, simple and easy.

Github project
Download version {{version}}

 

Install

Bower

bower install angular-restful

Manual

You can install manually, but is not recommended

<script src="//cdn.jsdelivr.net/angular-restful/current_version/angular-restful.min.js"></script>

 

Config

Angular-restful depends on the angular, if you don't know how install and config, please go to angular project

angular.module('yourModule', ['restful']);

 

Docs

$restful

angular.module('app', ['restful'])
.config(function ($restfulProvider) {
  $restfulProvider.url('http://localhost:3000');
  $restfulProvider.actions({
    list: { method: 'GET', isArray: true, params: { limit: 30} }
  });
});

Config

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

RestfulFactory

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'}});
}]);

Options

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

Restful

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
});

Options

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 order
This 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

 

Sample

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>

Demo