angular-xhr

Send $http requests with directives.

• Less lines of code for your controllers.
• Explicitly address your requests in your templates.
• Minus one dependency ($http) for your controller.

Why?

There are circumstances where a certain part of your app only has to send an $http request to an API, and repetitive $http in our controller can be tedious and unacceptable.

You can send a POST to api/v1/users/ with just this code:

<button
  srph-xhr="api/v1/users"
  request-type="POST"
  request-data="formData">
	Create User
</button>

Instead of having something the code below which is, honestly, quite tedious in some situations:

// user-create.controller.js

app.controller('UserCreateController', function($scope, $html) {
  $scope.request = function() {
  	// $http...
  }
});

<!-- user-create.html -->
<!-- input.. -->
<button type="button" ng-click="request()">Create User</button>

Let's Get Started

Getting started is very easy.

Installation

Add this library (angular-srph-xhr.js or angular-srph-xhr.min.js) in your project after angular, like so. It must be in proper order.

<script src="/path/to/angular.min.js"></script>
<script src="/path/to/angular-srph-xhr.min.js"></script>

Angular-XHR is available via [Bower]!

bower install angular-srph-xhr

While it is also possible to use the one provided by CDNs.

<script src="https://cdn.rawgit.com/srph/angular-xhr/dist/angular-srph-xhr.js"></script>
<script src="https://cdn.rawgit.com/srph/angular-xhr/dist/angular-srph-xhr.min.js"></script>

Add srph.xhr in your app's angular.module dependencies

angular.module('myApp', [/** other deps */, 'srph.xhr'];

Usage

Check the API Reference, Usage

Important Notes

I wrote this as proof-of-concept for utilizing directives to its limit, as written here. I'd like to keep this library as simple as possible.

I am in need of contributors (especially feat requests). I have not yet touched the other features in the XHR or $http API, so please feel free to issue a feature.

Announcements

As of 12/30/2014, I am technically stopping continuous development of this project after the release of v0.3. I'm not sure which kind of design to aim for. If you find it helpful, please feel free to issue a feature (for me to continue), to copy the idea, or to fork as you wish.

After months of fiddling with the project, I realized that this could be paired well with Restangular, which is a great library on top of $http.

Status

As of 0.3.1:

• Send requests
• Smart URLs (Removing trailing slashes)
• Base URL
• Send headers, set base headers
• (Pre-send phase) Action / expression to execute before running the $http
• Post-action / expression to execute after the $http (final block for the promise)
• Pre-action can cancel the request fn
• Send query parameters
• File uploads

This is an alpha release, and it is not recommended or suitable for production.

Name

Yes, this is very misleading.

However, it was a wiser decision to spend my free time on studying ($http, Angular, etc..), and updating the library, instead of changing lots of parts of the docs, changing lots of links, as well as re-registering on [Bower]. Also, given the fact that this is merely a proof-of-concept, and currently in alpha.

Docs / Examples

See the introductory docs here, API reference / docs, and the demos here.

Contribution

For features or fixes, I would suggest to submit an issue first before submitting a pull request. This avoids closed pull-requests; useless work.

=========      ================
| issue |  ->  | pull-request |
=========      ================

Make sure to check the Developer Reference doc.

Changelogs

View file.

Links / References

• Github Repository
• Introduction Docs
• API Docs
• Developer Docs

Acknowledgements

angular-xhr © 2014+, Kier Borromeo (srph). Released under the MIT License.

srph.github.io  ·  GitHub @srph  ·  Twitter @_srph