AngularJS HTTP Batcher

Common errors

• Module 'jcs.angular-http-batch' is not available! You either misspelled the module name or forgot to load it. If error is for a module this means the module itself is not loaded.

  cause The `angular-http-batch.min.js` script file was not included in the HTML, or the module name `'jcs.angular-http-batch'` was misspelled when declaring application dependencies.
  fix Ensure `<script src="path/to/angular-http-batch.min.js"></script>` is present in your HTML *after* AngularJS itself, and verify `angular.module('myApp', ['jcs.angular-http-batch'])` has the correct module name.

• Unknown provider: httpBatchConfigProviderProvider

  cause The `httpBatchConfigProvider` was requested in an Angular configuration block, but the `jcs.angular-http-batch` module has not been loaded or correctly declared as a dependency of the main application module.
  fix Verify that `angular.module('myApp', ['jcs.angular-http-batch'])` correctly lists the batcher module and that its JavaScript file is loaded.

• Cannot read property 'setAllowedBatchEndpoint' of undefined

  cause The `httpBatchConfigProvider` was not successfully injected into the config block, likely due to a misspelling or the module not being loaded.
  fix Check the spelling of `httpBatchConfigProvider` in your config function's argument list and array declaration. Also, ensure the main Angular module correctly lists `'jcs.angular-http-batch'` as a dependency.

Warnings

• breaking This library is specifically designed for AngularJS (Angular 1.x). It is not compatible with Angular 2+ applications. For Angular 2 and later, use `ngx-http-batcher` instead.
  Fix: For Angular 2+ projects, install and configure `ngx-http-batcher`. Do not attempt to use `angularjs-http-batcher` in modern Angular applications.
• gotcha The library will only batch requests if they are directed at an endpoint whose root URL has been explicitly registered with `httpBatchConfigProvider.setAllowedBatchEndpoint`.
  Fix: Ensure `httpBatchConfigProvider.setAllowedBatchEndpoint(rootUrl, batchEndpointUrl, options)` is correctly configured in your application's `.config()` block, specifying the base URL of your API and the dedicated batch endpoint.
• gotcha Batching is asynchronous and occurs after a short `batchRequestCollectionDelay`. Requests made within this delay window will be grouped. Requests outside this window or that exceed `maxBatchedRequestPerCall` will be sent individually or in new batches.
  Fix: Adjust `batchRequestCollectionDelay` and `maxBatchedRequestPerCall` in `setAllowedBatchEndpoint` options to match your application's typical request patterns and server capabilities. Be mindful that very short delays might not capture enough requests, while very long ones could introduce perceived latency.
• gotcha Certain HTTP verbs are ignored by default (e.g., 'HEAD'). If you need to batch these or other specific verbs, you must override the `ignoredVerbs` option.
  Fix: In the `setAllowedBatchEndpoint` options, explicitly set `ignoredVerbs: []` or specify an array of verbs you still wish to ignore. For example: `ignoredVerbs: ['OPTIONS']`.

Install

• npm install angularjs-http-batcher npm
• yarn add angularjs-http-batcher yarn
• pnpm add angularjs-http-batcher pnpm

Imports

• jcs.angular-http-batch
  wrong:

  import { httpBatch } from 'angularjs-http-batcher';

  correct:

  angular.module('myApp', ['jcs.angular-http-batch']);

  This is an AngularJS module. Its functionality is exposed by adding it as a dependency to your main Angular app module, not via ES module imports or CommonJS `require`.
• httpBatchConfigProvider
  wrong:

  app.config(['HttpBatchConfigProvider', function(HttpBatchConfigProvider) { ... }]);

  correct:

  app.config(['httpBatchConfigProvider', function(httpBatchConfigProvider) { ... }]);

  The provider name follows Angular's camelCase convention for injection; ensure correct casing and suffix 'Provider' when injecting into a config block.
• httpBatchAdapter
  wrong:

  { adapter: HttpBatchAdapter }

  correct:

  { adapter: 'httpBatchAdapter' }

  Adapter names are string literals specified in the configuration options, not direct object references.

Quickstart

This quickstart demonstrates how to include the `angularjs-http-batcher` library, configure a batch endpoint, and show how typical `$http` GET requests are transparently batched.

<!-- Include the AngularJS library first -->
<script src="node_modules/angular/angular.min.js"></script>
<!-- Then include the http-batcher library -->
<script src="node_modules/angularjs-http-batcher/dist/angular-http-batch.min.js"></script>

<script>
  angular.module('myApp', ['jcs.angular-http-batch'])
    .config([
      'httpBatchConfigProvider',
      function (httpBatchConfigProvider) {
        httpBatchConfigProvider.setAllowedBatchEndpoint(
          // Root endpoint URL of your API
          'http://api.myapp.com',
          // The specific endpoint that accepts batch requests
          'http://api.myapp.com/batch',
          // Optional configuration parameters
          {
            maxBatchedRequestPerCall: 20,
            minimumBatchSize: 2,
            batchRequestCollectionDelay: 100,
            ignoredVerbs: ['HEAD', 'OPTIONS'], // Do not batch these verbs
            sendCookies: true,
            enabled: true,
            adapter: 'httpBatchAdapter' // Defaults to HTTP 1.1 adapter
          }
        );
      }
    ]);

  angular.module('myApp')
    .controller('MyController', ['$http', function($http) {
      console.log('Fetching user data...');
      $http.get('http://api.myapp.com/users/1').then(res => console.log('User 1:', res.data));
      $http.get('http://api.myapp.com/users/2').then(res => console.log('User 2:', res.data));
      $http.get('http://api.myapp.com/products/10').then(res => console.log('Product 10:', res.data));
      // These three GET requests to 'http://api.myapp.com' will be batched if within the delay window
    }]);

  // Manually bootstrap the Angular app
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
  });
</script>
<div ng-app="myApp" ng-controller="MyController">
  <h1>HTTP Batching Demo</h1>
  <p>Check your browser's network tab for batched HTTP requests.</p>
</div>