Angular-restclient is a angular module to help you simplify any REST-based WebApp. It abstracts a RESTful (json) backend and gives you a extra layer. With that it's super easy to do any HTTP requests as GET, POST, PUT, DELETE and so on.
- Configure all endpoints individually
- Models gives you a whole new flexibility
- Mocks let you develop even when the backend is not fully ready yet
- Simple syntax
- Fully promise based architecture
- angular > 1.2.x
- angular-resource > 1.2.x
You can ether use bower, npm or git-clone to install angular-restclient. We recommend bower.
$ bower install angular-restclient --save$ npm install angular-restclient --saveLoad angular-resource.js and angular-restclient.js into your HTML page:
<script src="../bower_components/angular/angular[.min].js"></script>
<script src="../bower_components/angular-resource/angular-resource[.min].js"></script>
<script src="../bower_components/angular-restclient/dist/angular-restclient[.min].js"></script>Make your application module depend on the restclient module:
var app = angular.module('myApp', ['ngResource', 'restclient']);The configuration is super simple. This is a sample configuration. We define a baseRoute to the backend with two endpoints users and posts.
app.config(function(apiProvider) {
apiProvider.baseRoute('http://localhost/api');
apiProvider.endpoint('users')
.route('/users/:id/:controller')
.model('User');
apiProvider.endpoint('posts')
.route('/posts/:id')
.model('Post');
});Every endpoint must have a model defined. At first this seems like a lot of work but its worth it. This extra layer gives you a lot of flexibility. For example: When you have to manipulate the RESTful data you can do it once in the model and access it throughout your whole application. Here is a example of a user model:
app.factory('User', function(Model) {
function User(object) {
this.id = {
type: 'string',
save: false
};
this.firstname = {
type: 'string'
};
this.lastname = {
type: 'string'
};
this.email = {
type: 'email'
};
this.posts = {
type: 'relation',
relation: {
type: 'many',
model: 'Post'
},
save: false
};
// Map the given object
this._init(object);
}
angular.extend(User.prototype, Model.prototype);
return User;
});Last we make a call to the backend.
app.controller('Ctrl', function(api) {
api.users.get().then(function(users) {
$scope.users = users;
}, function(error) {
// error handling
});
});app.controller('Ctrl', function(api) {
api.users.get({id: 1}).then(function(user) {
$scope.users = user;
}, function(error) {
// error handling
});
});