- Added angular documentation

This commit is contained in:
Ferdi Koomen 2022-01-28 17:35:12 +01:00
parent 71fd3ed545
commit ff1cb27391
2 changed files with 76 additions and 5 deletions

View File

@ -1,13 +1,84 @@
# Angular support
Lorem
This tool allows you to generate a client based on the [`Angular HttpClient`](https://angular.io/guide/http).
The generated services are fully injectable and make use of the [RxJS](https://rxjs.dev/) Observer pattern.
If you want to generate the Angular based client then you can specify `--client angular` in the openapi call:
`openapi --input ./spec.json --output ./generated --client angular`
This has been tested with the following versions:
The Angular client has been tested with the following versions:
```
"@angular/common": "13.1.3",
"@angular/core": "13.1.3",
"rxjs": "7.5.2",
```
## Example
In the AppModule you can import the services and add them to the list of injectable services:
```typescript
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { OrganizationService } from './generated/services/OrganizationService';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
providers: [
OrganizationService,
],
bootstrap: [
AppComponent,
],
})
export class AppModule {}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
```
Inside the component you can inject the service and just use it as you would with any observable:
```typescript
import { Component } from '@angular/core';
import type { OrganizationService } from './generated/services/OrganizationService';
@Component({
selector: 'app-root',
template: `<div>Angular is ready</div>`,
})
export class AppComponent {
constructor(private readonly organizationService: OrganizationService) {
// Make a call
this.organizationService
.createOrganization({
name: 'OrgName',
description: 'OrgDescription',
})
.subscribe(organization => {
console.log(organization);
});
// Or even map result and retry on error
this.organizationService
.getOrganizations()
.pipe(
map(organizations => organizations[0]),
retryWhen(error => error)
)
.subscribe(organization => {
console.log(organization);
});
}
}
```

View File

@ -7,7 +7,7 @@ const generate = async (input, output) => {
await OpenAPI.generate({
input,
output,
httpClient: OpenAPI.HttpClient.ANGULAR,
httpClient: OpenAPI.HttpClient.FETCH,
useOptions: false,
useUnionTypes: false,
exportCore: true,
@ -57,8 +57,8 @@ const generateRealWorldSpecs = async () => {
};
const main = async () => {
await generate('./test/spec/aap.json', './test/generated/aap/');
// await generate('./test/spec/v3.json', './test/generated/v3/');
await generate('./test/spec/v2.json', './test/generated/v2/');
await generate('./test/spec/v3.json', './test/generated/v3/');
// await generateRealWorldSpecs();
};