{"id":21585098,"url":"https://github.com/angular-ru/angular-ru-http-example-app","last_synced_at":"2026-01-04T05:08:18.688Z","repository":{"id":90970942,"uuid":"344157389","full_name":"Angular-RU/angular-ru-http-example-app","owner":"Angular-RU","description":"DEMO: https://angular-ru.github.io/angular-ru-http-example-app/","archived":false,"fork":false,"pushed_at":"2021-07-07T14:02:54.000Z","size":1127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-24T15:29:09.793Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Angular-RU.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-03T14:37:40.000Z","updated_at":"2021-07-07T14:02:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad3ec381-6f23-4113-9a26-d07f1a20615c","html_url":"https://github.com/Angular-RU/angular-ru-http-example-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-ru-http-example-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-ru-http-example-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-ru-http-example-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-ru-http-example-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Angular-RU","download_url":"https://codeload.github.com/Angular-RU/angular-ru-http-example-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244189829,"owners_count":20412991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-24T15:09:03.153Z","updated_at":"2026-01-04T05:08:18.644Z","avatar_url":"https://github.com/Angular-RU.png","language":"HTML","readme":"## DataHttpClientModule\n\nCustom http client, with the ability to customize requests, auto unsubscribe and additional request interceptors.\n\nDemo: https://github.com/Angular-RU/angular-ru-http-example-app\n\n## Table of contents:\n\n1. [📖 Changelog](https://github.com/Angular-RU/angular-ru-sdk/blob/master/CHANGELOG.md)\n2. [📦 Advanced](#table-of-contents)\n\n    - [(@)angular-ru/http/utils](https://github.com/Angular-RU/angular-ru-sdk/blob/master/packages/http/docs/utils.md)\n    - [(@)angular-ru/http/decorators](https://github.com/Angular-RU/angular-ru-sdk/blob/master/packages/http/docs/decorators.md)\n\n#### First step\n\nExample, if your API base url placed here `https://my-server.com/api/***` and have swagger documentation:\n\n![](https://habrastorage.org/webt/af/bg/n9/afbgn985tehybqdpk2gs1ymq9se.jpeg)\n\n```ts\nimport { HttpClientModule } from '@angular/common/http';\nimport { DataHttpClientModule } from '@angular-ru/http';\n\n@NgModule({\n    imports: [\n        // ...\n        HttpClientModule,\n        DataHttpClientModule.forRoot([ApiUsersClient], {\n            hostUrl: 'https://my-server.com/api/'\n        })\n    ],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n#### Create your http client for your api controller\n\n-   `user.interface.ts`\n\n```ts\nexport interface User {\n    id: number;\n    name: string;\n}\n```\n\n-   `api-users.client.ts`\n\n```ts\nimport { Delete, Get, Patch, PathVariable, RequestBody, Put, RestClient } from '@angular-ru/http/decorators';\nimport { DataHttpClient } from '@angular-ru/http';\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n@Injectable()\n@RestClient('/users')\nexport class ApiUsersClient extends DataHttpClient {\n    @Get()\n    public findAllUsers(): Observable\u003cUser[]\u003e {\n        return this.restTemplate();\n    }\n\n    @Post()\n    public createUser(@RequestBody() _body: User): Observable\u003cvoid\u003e {\n        return this.restTemplate();\n    }\n\n    @Get('/{id}')\n    public findByIdUser(@PathVariable('id') _id: number): Observable\u003cUser\u003e {\n        return this.restTemplate();\n    }\n\n    @Put('/{id}')\n    public updateUser(@PathVariable('id') _id: number, @RequestBody() _body: User): Observable\u003cvoid\u003e {\n        return this.restTemplate();\n    }\n\n    @Delete('/{id}')\n    public deleteByIdUser(@PathVariable('id') _id: number): Observable\u003cvoid\u003e {\n        return this.restTemplate();\n    }\n\n    @Patch('/{id}')\n    public mutateUser(@PathVariable('id') _id: number, @RequestBody() _body: Partial\u003cUser\u003e): Observable\u003cvoid\u003e {\n        return this.restTemplate();\n    }\n}\n```\n\n-   `app.component.ts`\n\n```ts\n@Component({\n    //...\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class UsersComponent {\n    private readonly users: User[] = [];\n\n    constructor(private readonly users: ApiUsersClient, private readonly cd: ChangeDetectorRef) {}\n\n    public ngOnInit(): void {\n        this.users.findAllUsers().subscribe((users) =\u003e {\n            this.users = users;\n            this.cd.detectChanges();\n        });\n    }\n}\n```\n\n#### Different use cases\n\neach of these examples works the same\n\n```ts\n@Injectable()\n@RestClient('/cities')\nclass MyCitiesClient extends DataHttpClient {\n    @Put()\n    public updateCity(@RequestBody() _body: CityRecordDto, @RequestParam('id') _id: number): Observable\u003cvoid\u003e {\n        return this.restTemplate({ emitSuccess: true });\n    }\n}\n```\n\n```ts\n@Injectable()\n@RestClient('/cities')\nclass MyCitiesClient extends DataHttpClient {\n    @Put()\n    public updateCity(body: CityRecordDto, id: number): Observable\u003cvoid\u003e {\n        return this.restTemplate({ emitSuccess: true, body, queryParams: { id } });\n    }\n}\n```\n\n```ts\n@Injectable()\n@RestClient('/cities')\nclass MyCitiesClient extends DataHttpClient {\n    public updateCity(body: CityRecordDto, id: number): Observable\u003cvoid\u003e {\n        return this.put({ emitSuccess: true, body, queryParams: { id } });\n    }\n}\n```\n\n#### Limiting the number of concurrent requests (optional)\n\n| Option           | Value    | Description     |\n| :--------------- | :------- | :-------------- |\n| limitConcurrency | 255      | default         |\n| limitConcurrency | Infinity | no limits       |\n| limitConcurrency | n        | only n requests |\n\nthere is almost no limit on the number of requests that can be sent in parallel \u003cbr\u003e Note: various browsers have various\nlimits for maximum connections per host name (Chrome: 6)\n\n![](./docs/limit-concurrency-none.png)\n\nbut if necessary, you can change it \u003cbr\u003e for example, \u003cb\u003elimitConcurrency: 5\u003c/b\u003e \u003cbr\u003e This mean that maximum of 5\nrequests can be executed in parallel. Next one immediately start only if one of the previous requests is completed\n\n-   `app.module.ts`\n\n```ts\nimport { DataHttpClientModule } from '@angular-ru/http';\n\n@NgModule({\n    imports: [\n        // ...\n        DataHttpClientModule.forRoot([ApiUsersClient], {\n            // ...\n            limitConcurrency: 5\n        })\n    ]\n    // ...\n})\nexport class AppModule {}\n```\n\n![](./docs/limit-concurrency-5.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ru%2Fangular-ru-http-example-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-ru%2Fangular-ru-http-example-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ru%2Fangular-ru-http-example-app/lists"}