mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-12 17:43:57 +00:00
BETTERZON-33: Implementing API service class
This commit is contained in:
parent
e91a0085f6
commit
24c64dd709
11
Frontend/package-lock.json
generated
11
Frontend/package-lock.json
generated
|
@ -2472,14 +2472,6 @@
|
|||
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.1.tgz",
|
||||
"integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.21.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
|
||||
"integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"axobject-query": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
|
||||
|
@ -5333,7 +5325,8 @@
|
|||
"follow-redirects": {
|
||||
"version": "1.13.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
|
||||
"integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
|
||||
"integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
|
||||
"dev": true
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
|
|
|
@ -20,7 +20,6 @@
|
|||
"@angular/platform-browser": "^10.2.3",
|
||||
"@angular/platform-browser-dynamic": "^10.2.3",
|
||||
"@angular/router": "^10.2.3",
|
||||
"axios": "^0.21.0",
|
||||
"ng": "0.0.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.3",
|
||||
|
@ -42,8 +41,8 @@
|
|||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.0",
|
||||
"protractor": "~7.0.0",
|
||||
"typescript": "<4.1.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0"
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "<4.1.0"
|
||||
}
|
||||
}
|
||||
|
|
16
Frontend/src/app/api.service.spec.ts
Normal file
16
Frontend/src/app/api.service.spec.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ApiService } from './api.service';
|
||||
|
||||
describe('ApiService', () => {
|
||||
let service: ApiService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ApiService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
27
Frontend/src/app/api.service.ts
Normal file
27
Frontend/src/app/api.service.ts
Normal file
|
@ -0,0 +1,27 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {HttpClient, HttpHeaders} from '@angular/common/http';
|
||||
import process from 'process';
|
||||
import {Product} from './models/product';
|
||||
import {Observable, of} from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ApiService {
|
||||
apiUrl = 'https://backend.betterzon.xyz';
|
||||
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) {
|
||||
}
|
||||
|
||||
getProducts(): Observable<Product[]> {
|
||||
try {
|
||||
const prods = this.http.get<Product[]>((this.apiUrl + '/products'));
|
||||
console.log(prods);
|
||||
return prods;
|
||||
} catch (exception) {
|
||||
process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,22 +1,25 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {HttpClientModule} from '@angular/common/http';
|
||||
import {NgModule} from '@angular/core';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HelloWorldComponent } from './hello-world/hello-world.component';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { ProductListComponent } from './product-list/product-list.component';
|
||||
import {AppComponent} from './app.component';
|
||||
import {HelloWorldComponent} from './hello-world/hello-world.component';
|
||||
import {AppRoutingModule} from './app-routing.module';
|
||||
import {ProductListComponent} from './product-list/product-list.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HelloWorldComponent,
|
||||
ProductListComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HelloWorldComponent,
|
||||
ProductListComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {
|
||||
}
|
||||
|
|
14
Frontend/src/app/models/product.ts
Normal file
14
Frontend/src/app/models/product.ts
Normal file
|
@ -0,0 +1,14 @@
|
|||
export interface Product {
|
||||
product_id: number;
|
||||
asin: string;
|
||||
is_active: boolean;
|
||||
name: string;
|
||||
short_description: string;
|
||||
long_description: string;
|
||||
image_guid: string;
|
||||
date_added: Date;
|
||||
last_modified: Date;
|
||||
manufacturer_id: number;
|
||||
selling_rank: string;
|
||||
category_id: number;
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
<meta charset="UTF-8">
|
||||
<p *ngFor="let person of testList">
|
||||
{{person}}
|
||||
<p *ngFor="let product of products">
|
||||
{{product.name}}
|
||||
</p>
|
||||
|
|
|
@ -1,18 +1,26 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import axios, {AxiosInterceptorManager, AxiosRequestConfig, AxiosResponse} from 'axios';
|
||||
import process from 'process';
|
||||
import {ApiService} from '../api.service';
|
||||
import {Product} from '../models/product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-list',
|
||||
templateUrl: './product-list.component.html',
|
||||
styleUrls: ['./product-list.component.css']
|
||||
selector: 'app-product-list',
|
||||
templateUrl: './product-list.component.html',
|
||||
styleUrls: ['./product-list.component.css']
|
||||
})
|
||||
export class ProductListComponent implements OnInit {
|
||||
testList: string[];
|
||||
products: Product[];
|
||||
|
||||
constructor() {
|
||||
constructor(private apiService: ApiService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.testList = ['Herbert', 'Sascha', 'Rolf'];
|
||||
this.getProducts();
|
||||
}
|
||||
|
||||
getProducts(): void {
|
||||
this.apiService.getProducts().subscribe(products => this.products = products);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user