or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

angular-modules.mdbackend-implementation.mdconfiguration-options.mdheaders-parameters.mdhttp-services.mdindex.mdrequest-response.mdtesting.md
tile.json

tessl/npm-angular--http

Angular's original HTTP client service for making HTTP requests with RxJS Observables, XMLHttpRequest/JSONP backends, and XSRF protection.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/http@6.1.x

To install, run

npx @tessl/cli install tessl/npm-angular--http@6.1.0

index.mddocs/

Angular HTTP Client

Angular's original HTTP client service for making HTTP requests with RxJS Observables. Provides comprehensive HTTP functionality including XMLHttpRequest and JSONP backends, request/response handling, headers management, URL parameters, and built-in XSRF protection.

⚠️ Deprecation Notice: This package is deprecated in favor of @angular/common/http (HttpClient) which provides improved ergonomics, interceptors, and better TypeScript support.

Package Information

  • Package Name: @angular/http
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/http
  • Angular Version: Compatible with Angular 2-6
  • Dependencies: RxJS 6+, @angular/core, @angular/platform-browser

Core Imports

import { Http, RequestOptions, Headers, Response, RequestMethod } from '@angular/http';
import { HttpModule } from '@angular/http';
import { URLSearchParams, QueryEncoder } from '@angular/http';
import { VERSION } from '@angular/http';

For JSONP support:

import { Jsonp, JsonpModule, BrowserJsonp } from '@angular/http';

For testing:

import { MockBackend, MockConnection } from '@angular/http/testing';

Basic Usage

import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// Basic GET request
getUserData(): Observable<any> {
  return this.http.get('/api/users')
    .pipe(map(response => response.json()));
}

// POST with headers
createUser(userData: any): Observable<any> {
  const headers = new Headers({ 'Content-Type': 'application/json' });
  const options = new RequestOptions({ headers });
  
  return this.http.post('/api/users', JSON.stringify(userData), options)
    .pipe(map(response => response.json()));
}

// Custom headers and parameters
searchUsers(query: string): Observable<any> {
  const headers = new Headers({ 'Authorization': 'Bearer token' });
  const params = new URLSearchParams();
  params.set('q', query);
  
  const options = new RequestOptions({ headers, search: params });
  
  return this.http.get('/api/users/search', options)
    .pipe(map(response => response.json()));
}

Architecture

Angular HTTP is built around several key components:

  • HTTP Services: Main Http and Jsonp services for making requests
  • Observable Pattern: All HTTP methods return RxJS Observables for async handling
  • Request/Response Model: Request and Response classes with full body parsing support
  • Configuration System: Flexible options system for customizing requests and responses
  • Backend Abstraction: Pluggable backend system supporting XMLHttpRequest and JSONP
  • Security: Built-in XSRF protection and configurable security strategies

Capabilities

HTTP Client Services

Core HTTP services for making requests with XMLHttpRequest and JSONP backends. Supports all standard HTTP methods with Observable responses.

class Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions);
  
  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;
  get(url: string, options?: RequestOptionsArgs): Observable<Response>;
  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
  delete(url: string, options?: RequestOptionsArgs): Observable<Response>;
  patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
  head(url: string, options?: RequestOptionsArgs): Observable<Response>;
  options(url: string, options?: RequestOptionsArgs): Observable<Response>;
}

class Jsonp extends Http {
  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;
}

HTTP Services

Request and Response Handling

Complete request and response object model with body parsing, headers, status handling, and content type detection.

class Request extends Body {
  constructor(requestOptions: RequestArgs);
  
  method: RequestMethod;
  headers: Headers;
  url: string;
  withCredentials: boolean;
  responseType: ResponseContentType;
  
  json(): any;
  text(): string;
  arrayBuffer(): ArrayBuffer;
  blob(): Blob;
}

class Response extends Body {
  constructor(responseOptions: ResponseOptions);
  
  type: ResponseType;
  ok: boolean;
  url: string;
  status: number;
  statusText: string | null;
  headers: Headers | null;
  
  json(): any;
  text(): string;
  arrayBuffer(): ArrayBuffer;
  blob(): Blob;
}

Request and Response

Headers and Parameters

HTTP headers management and URL parameter handling with full manipulation capabilities.

class Headers {
  constructor(headers?: Headers | {[name: string]: any} | null);
  
  static fromResponseHeaderString(headersString: string): Headers;
  
  append(name: string, value: string): void;
  delete(name: string): void;
  get(name: string): string | null;
  has(name: string): boolean;
  set(name: string, value: string | string[]): void;
}

class URLSearchParams {
  constructor(rawParams?: string, queryEncoder?: QueryEncoder);
  
  has(param: string): boolean;
  get(param: string): string | null;
  set(param: string, val: string): void;
  append(param: string, val: string): void;
  delete(param: string): void;
  toString(): string;
}

Headers and Parameters

Configuration and Options

Comprehensive configuration system for customizing HTTP requests and responses with default options and merging capabilities.

class RequestOptions {
  constructor(opts?: RequestOptionsArgs);
  
  method: RequestMethod | string | null;
  headers: Headers | null;
  body: any;
  url: string | null;
  params: URLSearchParams;
  withCredentials: boolean | null;
  responseType: ResponseContentType | null;
  
  merge(options?: RequestOptionsArgs): RequestOptions;
}

class BaseRequestOptions extends RequestOptions {
  constructor(); // Sets defaults: GET method, empty headers
}

interface RequestOptionsArgs {
  url?: string | null;
  method?: string | RequestMethod | null;
  headers?: Headers | null;
  body?: any;
  withCredentials?: boolean | null;
  responseType?: ResponseContentType | null;
  params?: string | URLSearchParams | {[key: string]: any | any[]} | null;
}

Configuration and Options

Backend Implementation

Backend system supporting XMLHttpRequest and JSONP with XSRF protection and connection management.

abstract class ConnectionBackend {
  abstract createConnection(request: any): Connection;
}

abstract class Connection {
  readyState: ReadyState;
  request: Request;
  response: Observable<Response>;
}

class XHRBackend implements ConnectionBackend {
  constructor(browserXHR: BrowserXhr, baseResponseOptions: ResponseOptions, xsrfStrategy: XSRFStrategy);
  createConnection(request: Request): XHRConnection;
}

class JSONPBackend extends ConnectionBackend {
  constructor(browserJSONP: BrowserJsonp, baseResponseOptions: ResponseOptions);
  createConnection(request: Request): JSONPConnection;
}

Backend Implementation

Angular Module Integration

Angular modules for dependency injection and service configuration with HttpModule and JsonpModule.

class HttpModule {
  // Provides: Http, BrowserXhr, RequestOptions, ResponseOptions, XHRBackend, XSRFStrategy
}

class JsonpModule {
  // Provides: Jsonp, BrowserJsonp, RequestOptions, ResponseOptions, JSONPBackend
}

Angular Module Integration

Testing Utilities

Comprehensive testing support with mock backends and connection objects for unit testing HTTP services.

class MockBackend implements ConnectionBackend {
  connections: Subject<MockConnection>;
  connectionsArray: MockConnection[];
  pendingConnections: Subject<MockConnection>;
  
  createConnection(request: Request): MockConnection;
  verifyNoPendingRequests(): void;
  resolveAllConnections(): void;
}

class MockConnection implements Connection {
  readyState: ReadyState;
  request: Request;
  response: ReplaySubject<Response>;
  
  constructor(request: Request);
  mockRespond(response: Response): void;
  mockError(error?: Error): void;
  mockDownload(response: Response): void;
}

Testing

Base Classes and Utilities

Body Class

Base class for Request and Response providing body parsing capabilities.

abstract class Body {
  protected _body: any;
  
  json(): any;
  text(encodingHint?: 'legacy' | 'iso-8859'): string;
  arrayBuffer(): ArrayBuffer;
  blob(): Blob;
}

Version Information

Package version constant for runtime version checking.

const VERSION: Version;

Types and Enums

enum RequestMethod {
  Get = 0,
  Post = 1,
  Put = 2,
  Delete = 3,
  Options = 4,
  Head = 5,
  Patch = 6
}

enum ResponseType {
  Basic = 0,
  Cors = 1,
  Default = 2,
  Error = 3,
  Opaque = 4
}

enum ResponseContentType {
  Text = 0,
  Json = 1,
  ArrayBuffer = 2,
  Blob = 3
}

enum ReadyState {
  Unsent = 0,
  Open = 1,
  HeadersReceived = 2,
  Loading = 3,
  Done = 4,
  Cancelled = 5
}

class QueryEncoder {
  encodeKey(key: string): string;
  encodeValue(value: string): string;
}