w postmanie działa tak jak trzeba:
[get] http://127.0.0.1:8000/api/lista
- wyświetla dane
[put] http://127.0.0.1:8000/api/lista/id
- aktualizuje wpis
[delete] http://127.0.0.1:8000/api/lista/id
- kasuje rekord z bazy
Teraz chcę to połączyć na froncie używając angulara:
w environment.ts i environment.prod.ts mam dodaną linijkę:
Kod
// URL of development API
apiUrl: 'http://127.0.0.1:8000/api'
apiUrl: 'http://127.0.0.1:8000/api'
w api.service.ts dopisane:
Kod
import { environment } from 'environments/environment';
const API_URL = environment.apiUrl;
@Injectable()
export class ApiService {
constructor(
private http: Http
) {
}
public getAllList(): Observable<List[]> {
return this.http
.get(API_URL + '/lista')
.map(response => {
const list = response.json();
return lists.map((list) => new List(list));
})
.catch(this.handleError);
}
const API_URL = environment.apiUrl;
@Injectable()
export class ApiService {
constructor(
private http: Http
) {
}
public getAllList(): Observable<List[]> {
return this.http
.get(API_URL + '/lista')
.map(response => {
const list = response.json();
return lists.map((list) => new List(list));
})
.catch(this.handleError);
}
w list.service.ts
Kod
import {Injectable} from '@angular/core';
import {List} from './list';
import { ApiService } from './api.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ListDataService {
constructor(
private api: ApiService
) {
}
// Simulate GET /lists
getAllLists(): Observable<List[]> {
return this.api.getAllLists();
}
}
import {List} from './list';
import { ApiService } from './api.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ListDataService {
constructor(
private api: ApiService
) {
}
// Simulate GET /lists
getAllLists(): Observable<List[]> {
return this.api.getAllLists();
}
}
w list.component.html:
Kod
<div class="view">
<label>{{list.name}}</label>
<label>{{list.text}}</label>
<label>{{list.email}}</label>
<button class="destroy" (click)="removeList(list)"></button>
</div>
<label>{{list.name}}</label>
<label>{{list.text}}</label>
<label>{{list.email}}</label>
<button class="destroy" (click)="removeList(list)"></button>
</div>
w list.component.ts:
Kod
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { List } from '../list';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent {
@Input() list: List;
@Output()
remove: EventEmitter<List> = new EventEmitter();
@Output()
toggleComplete: EventEmitter<List> = new EventEmitter();
constructor() {
}
removeList(list: List) {
this.remove.emit(list);
}
}
import { List } from '../list';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent {
@Input() list: List;
@Output()
remove: EventEmitter<List> = new EventEmitter();
@Output()
toggleComplete: EventEmitter<List> = new EventEmitter();
constructor() {
}
removeList(list: List) {
this.remove.emit(list);
}
}
i w zasadzie nie wiem co dalej - jak i gdzie dodać getAllList(), aby pobierało dane z bazy i wyświetlało na stronie?
Aplikacja angularowa działa pod adresem http://localhost:4200/