{"id":13807160,"url":"https://github.com/manudss/ngx-http-annotations","last_synced_at":"2025-05-14T00:31:02.428Z","repository":{"id":47428873,"uuid":"130906642","full_name":"manudss/ngx-http-annotations","owner":"manudss","description":null,"archived":false,"fork":true,"pushed_at":"2023-07-20T15:31:26.000Z","size":2808,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T16:12:44.019Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Mixalloff/ngx-http-rest","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manudss.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}},"created_at":"2018-04-24T19:55:30.000Z","updated_at":"2023-07-20T15:31:04.000Z","dependencies_parsed_at":"2023-01-20T09:19:13.360Z","dependency_job_id":null,"html_url":"https://github.com/manudss/ngx-http-annotations","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manudss%2Fngx-http-annotations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manudss%2Fngx-http-annotations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manudss%2Fngx-http-annotations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manudss%2Fngx-http-annotations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manudss","download_url":"https://codeload.github.com/manudss/ngx-http-annotations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046241,"owners_count":22005559,"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-08-04T01:01:21.821Z","updated_at":"2025-05-14T00:30:57.412Z","avatar_url":"https://github.com/manudss.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Angular"],"readme":"# ngx-http-annotations\n\nThis library allows to interact with rest api in your angular app.\nIt contains:\n\n- Annotations for http methods (@GET, @POST, @PUT, @DELETE, @OPTIONS, @HEAD, @PATCH)\n- Annotations for adding headers, setting produces results and intercepting response\n- Params annotations\n\nforked from : https://github.com/Mixalloff/ngx-http-rest\n\n### Installation\n\nInstall through npm:\n\n```sh\n$ npm install ngx-http-annotations --save\n```\n\n\n### Development\n\nExample of using library.\n\n1) Plug the HttpRestModule into your AppModule\n\n```typescript\nimport { NgxHttpAnnotationsModule } from 'ngx-http-annotations';\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n  imports: [\n    NgxHttpAnnotationsModule\n  ]\n})\nexport class AppModule {\n}\n```\n\n2) Create a service to work with rest api. Put annotations on the class, methods and params.\n\n\n```typescript\nimport {  GET, POST, DELETE, Path, PathParam, Body, QueryParam, QueryParams, ResponseObservable } from 'ngx-http-annotations';\nimport { Injectable } from '@angular/core';\nimport RestConfig from 'app/core/configs/rest.config';\n\ninterface GoodsItem {\n  id: number,\n  name: string,\n  price: number,\n  sales?: boolean;\n  desc?: string;\n  children?: Array\u003cGoodsItem\u003e;\n}\n\n@Injectable()\n@Headers({\n  'someHeader1': 'headerValue1',\n  'someHeader2': 'headerValue2'\n})\n@Path(`/test/goods`)\nexport class SomeRestService {\n\n  @GET\n  getGoods(@QueryParams /* Object with queryParams { [name: string]: [value: any] } */ queryObj?: any): any {}\n\n  @GET\n  getGoodsBySomeParam(@QueryParam('sales') /* ...?sales= */ isSold: boolean): any {}\n\n  @GET\n  @Path('/:id')\n  getGoodsItemById(@PathParam('id') itemId: number): any {}\n\n  @GET\n  @Path('/:id/child/:childId') /* Few path params */\n  getChildrenOfSomeGoods(@PathParam('id') id: number,\n                         @PathParam('childId') childId: number\n                         @QueryParam('sales') isSold: boolean,\n                         @QueryParam('someParam') some: any): any {}\n\n  @POST\n  @Path('/create')\n  createGoods(@Body /* Body of POST request */ goodsObject: GoodsItem): any {}\n\n  @DELETE\n  @Path('/:id')\n  removeGoodsById(@PathParam('id') itemId: number): any {}\n  \n  @GET\n  @Path('posts')\n  /**\n  * getPostForUserId(3, 2) : call the the url /posts?userId=2 and only take 3 results\n  */\n  public getPostForUserId(number: number, @QueryParam('userId') userId: number, @ResponseObservable res: Observable\u003cany\u003e = undefined): Observable\u003cany\u003e {\n    return res.pipe(map((response) =\u003e response.slice(0, number)));\n  }\n\n\n}\n```\n\n3) Call the request method from component\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { SomeRestService } from './some-rest.service';\n\n@Component({\n  selector: 'some-test-component',\n  templateUrl: './test-component.component.html',\n  styleUrls: ['./test-component.component.css'],\n  providers: [SomeRestService]\n})\nexport class TestComponent implements OnInit {\n  constructor(private someRestService: SomeRestService){}\n\n  ngOnInit() {\n    this.someRestService\n      .getGoods()\n      .subscribe( goods =\u003e console.log(goods) );\n  }\n}\n```\n\n### Description\nAvailable annotations:\n1) Request methods\n   @GET, @POST, @PUT, @DELETE, @OPTIONS, @HEAD, @PATCH - marks methods implementing the corresponding requests\n2) Added settings\n- @Path - set path of url for request. Combined class @Path annotation value and current method @Path. Path params passed with \":\". For example @Path('/someurl/:someParam')\n- @Headers - set headers for request (if annotate class, then all class methods getting this headers. method Headers merge with class Headers)\n- @Produces - setting expected response type. By default Reponse transformed by .json() method\n- @Observes - setting http observes.\n3) Parameters\n- @PathParam (or @Path) - pass current parameter by name to collected url. Example: someFunc(@PathParam('id') itemId: number) {}\n- @Body - pass body object into request. Ex.: someMethod(@Body bodyObject: any){}\n- @QueryParam - pass single query parameters into request. Ex.: someMethod(@QueryParam('a') a: any, @QueryParam('b') b: any) {}. someMethod(1, 2) -\u003e ..requested_url..?a=1\u0026b=2\n- @QueryParams - pass object with few query params. Ex.: someMethod(@QueryParams queryObj: any){}. someMethod({x: 1, y: 2, z: 3}) -\u003e ..requested_url..?x=1\u0026y=2\u0026z=3\n- @ResponseObservable - specify in witch function params, the response observable will be added. Ex.: someMethod(@ResponseObservable res: Observable\u003cany\u003e = undefined){ /* transform request */ return res; }. need to initialise as undefined to pass compile error, and return a response.\n\n\n#### Transform response with all rxjs function\n\nBy adding the parameters @ResponseObservable you can specify, where add the observable response,\n\n  ```typescript\n    \n    @GET\n    @Path('posts')\n    /**\n    * getPostForUserId(3, 2) : call the the url /posts?userId=2 and only take 3 results\n    */\n    public getPostForUserId(number: number, @QueryParam('userId') userId: number, @ResponseObservable res: Observable\u003cany\u003e = undefined): Observable\u003cany\u003e {\n      return res.pipe(map((response) =\u003e response.slice(0, number)));\n    }\n  ```\n### Mocks calls\n\nTo have a feature to enable mocks api. When enabled, will call directly the function rather than call the http request.\n\nTo enable Mocks : in a module provider use this :\n```typescript\nproviders: [{ provide: HTTP_ANNOTATIONS_USE_MOCKS, useValue: true }]\n```\nYou can specify a boolean value, or have a specific function, that will be used to know if the apps will use mock.\nThis could help you to define mock only for specific call.\n\n\n```typescript\nproviders: [{ provide: HTTP_ANNOTATIONS_USE_MOCKS, useValue: (url, requestType, params, args): boolean =\u003e {\n       console.log('useMock : ', url, requestType, params, args);\n      return requestType === 'Get' ? true : false;\n    } }]\n```\n\ndefine your mocks by return a fake observable, with your mock data.\n\n```typescript\n  @GET\n  @Path('posts/:id')\n  public getPost(@PathParam('id') id: number): Observable\u003cany\u003e {\n    return of([{id: id, title: 'mock true'}]);\n  }\n```\n\n### Change logs\n\n0.6.x\n\n-\u003e updates to the latest versions of Angular\n-\u003e Rename library to ngx-http-annotations\n-\u003e add @ResponseObservable to transform response.\n\n0.6.2 et 0.6.3\n\n-\u003e update to build the library with angular, to avoid error when build in --prod\n\n0.7.x\n\n-\u003e Add a mock feature.\n-\u003e Update dependency to latest\n\n0.7.3\n-\u003e Add delay: Add a beta feature, to add a delay to all requests, or have a function that returns this delay. This could be useful, in the mock feature. By default, all mock, will have a default delay. But could be also added without mock, to simulate long request.\n-\u003e Use all httpClient methods rather than use request method, use the corresponding method (get, put, delete ...). In order, to avoid issue with request method that throw a first empty error.\n-\u003e Update dependencies: Update to version 13 of Angular.\n\n0.8.0\n-\u003e Updates to Angular 16, and compile libs to ivy\n-\u003e change to nx workspace \n-\u003e Add unit tests\n\n### Source and issues\n\nCode are located in github : https://github.com/manudss/ngx-http-annotations\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanudss%2Fngx-http-annotations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanudss%2Fngx-http-annotations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanudss%2Fngx-http-annotations/lists"}