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>