Skip to content

Commit 408c9fe

Browse files
manudssmanudss
committed
👷 correct builds to publish + restore Readme files
1 parent dca4773 commit 408c9fe

File tree

3 files changed

+284
-104
lines changed

3 files changed

+284
-104
lines changed

‎README.md

Lines changed: 204 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,212 @@
1+
# ngx-http-annotations
12

3+
This library allows to interact with rest api in your angular app.
4+
It contains:
25

3-
# NgxHttpAnnotations
6+
- Annotations for http methods (@GET, @POST, @PUT, @DELETE, @OPTIONS, @HEAD, @PATCH)
7+
- Annotations for adding headers, setting produces results and intercepting response
8+
- Params annotations
49

5-
This project was generated using [Nx](https://nx.dev).
10+
forked from : https://github.com/Mixalloff/ngx-http-rest
611

7-
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
12+
### Installation
813

9-
🔎 **Smart, Fast and Extensible Build System**
14+
Install through npm:
1015

11-
## Quick Start & Documentation
16+
```sh
17+
$ npm install ngx-http-annotations --save
18+
```
1219

13-
[Nx Documentation](https://nx.dev/getting-started/intro)
1420

15-
[Mental model is a good starting point for those who like to understand things theoretically first.](https://nx.dev/concepts/mental-model)
16-
17-
[Interactive Tutorial](https://nx.dev/getting-started/angular-tutorial)
18-
19-
## Adding capabilities to your workspace
20-
21-
Nx supports many plugins which add capabilities for developing different types of applications and different tools.
22-
23-
These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
24-
25-
Below are our core plugins:
26-
27-
- [Angular](https://angular.io)
28-
- `ng add @nrwl/angular`
29-
- [React](https://reactjs.org)
30-
- `ng add @nrwl/react`
31-
- Web (no framework frontends)
32-
- `ng add @nrwl/web`
33-
- [Nest](https://nestjs.com)
34-
- `ng add @nrwl/nest`
35-
- [Express](https://expressjs.com)
36-
- `ng add @nrwl/express`
37-
- [Node](https://nodejs.org)
38-
- `ng add @nrwl/node`
39-
40-
There are also many [community plugins](https://nx.dev/community) you could add.
41-
42-
## Generate an application
43-
44-
Run `ng g @nrwl/angular:app my-app` to generate an application.
45-
46-
> You can use any of the plugins above to generate applications as well.
47-
48-
When using Nx, you can create multiple applications and libraries in the same workspace.
49-
50-
## Generate a library
51-
52-
Run `ng g @nrwl/angular:lib my-lib` to generate a library.
53-
54-
> You can also use any of the plugins above to generate libraries as well.
55-
56-
Libraries are shareable across libraries and applications. They can be imported from `@ngx-http-annotations/mylib`.
57-
58-
## Development server
59-
60-
Run `ng serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
61-
62-
## Code scaffolding
63-
64-
Run `ng g component my-component --project=my-app` to generate a new component.
65-
66-
## Build
67-
68-
Run `ng build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
69-
70-
## Running unit tests
71-
72-
Run `ng test my-app` to execute the unit tests via [Jest](https://jestjs.io).
73-
74-
Run `nx affected:test` to execute the unit tests affected by a change.
75-
76-
## Running end-to-end tests
77-
78-
Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
79-
80-
Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
81-
82-
## Understand your workspace
83-
84-
Run `nx graph` to see a diagram of the dependencies of your projects.
85-
86-
## Further help
87-
88-
Visit the [Nx Documentation](https://nx.dev/angular) to learn more.
89-
90-
91-
92-
93-
94-
95-
## ☁ Nx Cloud
96-
97-
### Distributed Computation Caching & Distributed Task Execution
98-
99-
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-cloud-card.png"></p>
100-
101-
Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.
102-
103-
Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.
104-
105-
Visit [Nx Cloud](https://nx.app/) to learn more.
21+
### Development
22+
23+
Example of using library.
24+
25+
1) Plug the HttpRestModule into your AppModule
26+
27+
```typescript
28+
import { HttpRestModule } from 'ngx-http-annotations';
29+
import { NgModule } from '@angular/core';
30+
31+
@NgModule({
32+
imports: [
33+
HttpRestModule
34+
]
35+
})
36+
export class AppModule {
37+
}
38+
```
39+
40+
2) Create a service to work with rest api. Inherit it from HttpRestService from 'ngx-http-rest'. Put annotations on the class, methods and params.
41+
42+
43+
```typescript
44+
import { HttpRestService, GET, POST, DELETE, Path, PathParam, Body, QueryParam, QueryParams, ResponseObservable } from 'ngx-http-annotations';
45+
import { Injectable } from '@angular/core';
46+
import RestConfig from 'app/core/configs/rest.config';
47+
48+
interface GoodsItem {
49+
id: number,
50+
name: string,
51+
price: number,
52+
sales?: boolean;
53+
desc?: string;
54+
children?: Array<GoodsItem>;
55+
}
56+
57+
@Injectable()
58+
@Headers({
59+
'someHeader1': 'headerValue1',
60+
'someHeader2': 'headerValue2'
61+
})
62+
@Path(`/test/goods`)
63+
export class SomeRestService extends HttpRestService {
64+
65+
@GET
66+
getGoods(@QueryParams /* Object with queryParams { [name: string]: [value: any] } */ queryObj?: any): any {}
67+
68+
@GET
69+
getGoodsBySomeParam(@QueryParam('sales') /* ...?sales= */ isSold: boolean): any {}
70+
71+
@GET
72+
@Path('/:id')
73+
getGoodsItemById(@PathParam('id') itemId: number): any {}
74+
75+
@GET
76+
@Path('/:id/child/:childId') /* Few path params */
77+
getChildrenOfSomeGoods(@PathParam('id') id: number,
78+
@PathParam('childId') childId: number
79+
@QueryParam('sales') isSold: boolean,
80+
@QueryParam('someParam') some: any): any {}
81+
82+
@POST
83+
@Path('/create')
84+
createGoods(@Body /* Body of POST request */ goodsObject: GoodsItem): any {}
85+
86+
@DELETE
87+
@Path('/:id')
88+
removeGoodsById(@PathParam('id') itemId: number): any {}
89+
90+
@GET
91+
@Path('posts')
92+
/**
93+
* getPostForUserId(3, 2) : call the the url /posts?userId=2 and only take 3 results
94+
*/
95+
public getPostForUserId(number: number, @QueryParam('userId') userId: number, @ResponseObservable res: Observable<any> = undefined): Observable<any> {
96+
return res.pipe(map((response) => response.slice(0, number)));
97+
}
98+
99+
100+
}
101+
```
102+
103+
3) Call the request method from component
104+
105+
```typescript
106+
import { Component, OnInit } from '@angular/core';
107+
import { SomeRestService } from './some-rest.service';
108+
109+
@Component({
110+
selector: 'some-test-component',
111+
templateUrl: './test-component.component.html',
112+
styleUrls: ['./test-component.component.css'],
113+
providers: [SomeRestService]
114+
})
115+
export class TestComponent implements OnInit {
116+
constructor(private someRestService: SomeRestService){}
117+
118+
ngOnInit() {
119+
this.someRestService
120+
.getGoods()
121+
.subscribe( goods => console.log(goods) );
122+
}
123+
}
124+
```
125+
126+
### Description
127+
Available annotations:
128+
1) Request methods
129+
@GET, @POST, @PUT, @DELETE, @OPTIONS, @HEAD, @PATCH - marks methods implementing the corresponding requests
130+
2) Added settings
131+
- @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')
132+
- @Headers - set headers for request (if annotate class, then all class methods getting this headers. method Headers merge with class Headers)
133+
- @Produces - setting expected response type. By default Reponse transformed by .json() method
134+
- @Observes - setting http observes.
135+
3) Parameters
136+
- @PathParam (or @Path) - pass current parameter by name to collected url. Example: someFunc(@PathParam('id') itemId: number) {}
137+
- @Body - pass body object into request. Ex.: someMethod(@Body bodyObject: any){}
138+
- @QueryParam - pass single query parameters into request. Ex.: someMethod(@QueryParam('a') a: any, @QueryParam('b') b: any) {}. someMethod(1, 2) -> ..requested_url..?a=1&b=2
139+
- @QueryParams - pass object with few query params. Ex.: someMethod(@QueryParams queryObj: any){}. someMethod({x: 1, y: 2, z: 3}) -> ..requested_url..?x=1&y=2&z=3
140+
- @ResponseObservable - specify in witch function params, the response observable will be added. Ex.: someMethod(@ResponseObservable res: Observable<any> = undefined){ /* transform request */ return res; }. need to initialise as undefined to pass compile error, and return a response.
141+
142+
143+
#### Transform response with all rxjs function
144+
145+
By adding the parameters @ResponseObservable you can specify, where add the observable response,
146+
147+
```typescript
148+
149+
@GET
150+
@Path('posts')
151+
/**
152+
* getPostForUserId(3, 2) : call the the url /posts?userId=2 and only take 3 results
153+
*/
154+
public getPostForUserId(number: number, @QueryParam('userId') userId: number, @ResponseObservable res: Observable<any> = undefined): Observable<any> {
155+
return res.pipe(map((response) => response.slice(0, number)));
156+
}
157+
```
158+
### Mocks calls
159+
160+
To have a feature to enable mocks api. When enabled, will call directly the function rather than call the http request.
161+
162+
To enable Mocks : in a module provider use this :
163+
```typescript
164+
providers: [{ provide: HTTP_ANNOTATIONS_USE_MOCKS, useValue: true }]
165+
```
166+
You can specify a boolean value, or have a specific function, that will be used to know if the apps will use mock.
167+
This could help you to define mock only for specific call.
168+
169+
170+
```typescript
171+
providers: [{ provide: HTTP_ANNOTATIONS_USE_MOCKS, useValue: (url, requestType, params, args): boolean => {
172+
console.log('useMock : ', url, requestType, params, args);
173+
return requestType === 'Get' ? true : false;
174+
} }]
175+
```
176+
177+
define your mocks by return a fake observable, with your mock data.
178+
179+
```typescript
180+
@GET
181+
@Path('posts/:id')
182+
public getPost(@PathParam('id') id: number): Observable<any> {
183+
return of([{id: id, title: 'mock true'}]);
184+
}
185+
```
186+
187+
### Change logs
188+
189+
0.6.x
190+
191+
-> updates to latest versions of Angular
192+
-> Rename library to ngx-http-annotations
193+
-> add @ResponseObservable to transform response.
194+
195+
0.6.2 et 0.6.3
196+
197+
-> update to build library with angular, to avoid error when build in --prod
198+
199+
0.7.x
200+
201+
-> Add a mock feature.
202+
-> Update dependency to latest
203+
204+
0.7.3
205+
-> Add delay : Add a beta feature, to add a delay to all request, or had a function that return 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.
206+
-> Use all httpClient method rather than use request method, use corresponding method (get, put, delete ...). In order, to avoid issue with request method that throw a first empty error.
207+
-> Update dependencies : Update to version 13 of Angular.
208+
209+
210+
### Source and issues
211+
212+
Code are located in github : https://github.com/manudss/ngx-http-annotations

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
"scripts": {
66
"ng": "nx",
77
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
8-
"start": "nx serve",
9-
"build": "nx build",
10-
"test": "nx test",
8+
"start": "nx serve sample-ngx-http-annotations",
9+
"build": "nx run sample-ngx-http-annotations:build:production",
10+
"test": "nx test ngx-http-annotations",
1111
"build_lib": "nx run ngx-http-annotations:build:production && npm run copy-readme",
1212
"copy-readme": "copyfiles ./README.md ./dist/libs/ngx-http-annotations",
1313
"npm_pack": "cd dist/libs/ngx-http-annotations && npm pack",
@@ -48,6 +48,7 @@
4848
"@types/node": "16.11.7",
4949
"@typescript-eslint/eslint-plugin": "^5.36.1",
5050
"@typescript-eslint/parser": "^5.36.1",
51+
"copyfiles": "^2.4.1",
5152
"cypress": "^10.7.0",
5253
"eslint": "~8.15.0",
5354
"eslint-config-prettier": "8.1.0",

0 commit comments

Comments
 (0)