ng-ajax

Easily make ajax requests in AngularJS. Plunker Demo

ng-ajax provides straight-forward directives which enable you to perform AJAX calls without writing any javascript code, and with great controls.

Links

• Quick Examples
• Installations
• Documentation

Quick Examples

 <input type="text" ng-model="postNum">
 <ng-ajax-control auto debounce-duration="1000">
    <ng-ajax method="GET"
             url="'http://jsonplaceholder.typicode.com/posts/' + postNum"
             ajax-error="error"
             ajax-success="response">
    </ng-ajax>
</ng-ajax-control>

With auto setting to true, the directive performs a GET request to retrieve the post whenever the url is changed. Automatically generated requests will be debounced so that the GET request is only performed once every 1 second.

 <button ng-ajax-emit="post-and-get">Post And Get</button>
 <ng-ajax-control auto="false"
                  on="post-and-get"
                  loading="isAnyLoading"
                  flow="series">
     <ng-ajax method="POST"
              url="'http://jsonplaceholder.typicode.com/posts'"
              body="{title:'foo', id: 2}"
              loading="isLoading1"
              ajax-error="error1"
              ajax-success="response1">
     </ng-ajax>

     <ng-ajax method="GET"
              url="'http://jsonplaceholder.typicode.com/posts/' + (response1.data.id)"
              loading="isLoading2"
              ajax-error="error2"
              ajax-success="response2">
     </ng-ajax>
 </ng-ajax-control>

When the button is clicked, it'll emit a 'post-and-get' event, thus triggers the directive to perform two AJAX requests in series — first the POST request and then the GET request. Note that, the second POST request is able to perform the AJAX call by using the data from the response of the first GET request.

Installations

Installation is easy as ng-ajax has minimal dependencies — only the AngularJS (v1.3 and upper versions) is required.

Install with npm

$ npm install ng-ajax

Install with bowser

$ bower install ng-ajax

Getting started

1. Add references to AngularJS, e.g.:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js""></script>

1. Add references to ng-ajax's javascript:

<script src="https://cdn.rawgit.com/alex-ou/ng-ajax/master/dist/ng-ajax.min.js"></script>

1. Where you declare your app module, add ngAjax:

angular.module("myApp", ["ngAjax"]);

1. In your html file within the controller, add:

<ng-ajax-control auto debounce-duration="1000">
      <ng-ajax
        method="GET"
        url="'data.json'"
        loading="isLoading"
        ajax-error="error"
        ajax-success="response"></ng-ajax>
</ng-ajax-control>

Documentation

Basic usage is as below, ng-ajax-control can have multiple ng-ajax children. ng-ajax can ran in parallel or series depending on the flow property.

<ng-ajax-control flow="parallel|series">
    <ng-ajax></ng-ajax>
    <ng-ajax></ng-ajax>
</ng-ajax-control>

<ng-ajax-control> directive

Controls the behaviors of the ng-ajax children, supported properties:

<ng-ajax> directive

ng-ajax exposes $http functionality, supported properties:

<ng-ajax-emit> directive

Listens to the click event of the attached element, and dispatches an event eventName through the $rootScope to notify the ng-ajax-control to run all the AJAX requests. Can only be used as an attribute, e.g.

<button ng-ajax-emit='eventName'></button>

`