Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [angular] Api w zewnetrznej aplikacji, nie chce pobierać wartości
poczatkujaca12
post 18.05.2020, 16:41:50
Post #1





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 24.06.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


mam API w PHP:
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'


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);
    }

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();
  }

}


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>

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);
  }

}


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/

Ten post edytował poczatkujaca12 18.05.2020, 16:51:37
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 20:41