Szybki start z Angular na przykładzie Rest API


Szybki start z Angular na przykładzie Rest API

W tym wpisie pokaże Ci jak szybko napisać aplikację z użyciem biblioteki Angular na przykładzie Rest API które zwraca dane o pracownikach. API to dostępne jest pod adresem: http://dummy.restapiexample.com/api/v1/employees.

Przygotowanie środowiska:

  1. https://nodejs.org/en/ – instalujemy Node.js o menedżera pakietów npm
  2. Angular CLI 8 – polecenie – npm install -g @angular/cli

Weryfikujemy wersję menedżera pakietów – npm:

npm -version

wynik:

6.13.4

weryfikujemy wersję CLI (z ang. Command Line Interface):

ng --version

wynik:

Angular CLI: 9.0.6

Nowy projekt:

ng new JavaLeaderAngularApp

testujemy lokalnie:

ng serve

aplikacja działa na porcie 4200:

http://localhost:4200

Tworzymy serwis:

W serwisie zdefiniujemy metodę która wykona zapytanie typu GET do API:

ng generate service api

wynik:

CREATE src/app/api.service.spec.ts (342 bytes)
CREATE src/app/api.service.ts (132 bytes

Modyfikacja pliku \src\app\app.module.ts:

Importujemy moduł HttpClientModule oraz dodajemy go do tablicy importów w następujący oto sposób:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Modyfikacja pliku src\app\api.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
export class ApiService {
 
  constructor(private httpClient: HttpClient) { }
   public getEmployees(){
      return this.httpClient.get('http://dummy.restapiexample.com/api/v1/employees');
    }
}

Tworzymy komponent:

Komponent pozwala dokonać “subskrypcji na dane” zwracane z API:

ng generate component employee

Modyfikacja pliku \src\employee\employee.component.ts:

import { Component }  from '@angular/core';
import { ApiService } from '../api.service';
import { OnInit }     from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  title = 'JavaLeaderAngularApp';
  constructor(private apiService: ApiService) { }
 
  employees;
 
  ngOnInit() {
      this.apiService.getEmployees().subscribe((data)=>{
        this.employees = data['data'];
      });
  }
}

Tworzymy widok:

Modyfikacja pliku \src\employee\employee.component.html:

<div *ngFor="let emp of employees['data']">
  <h2>{{emp.employee_name}}</h2>
</div>

Dodajemy routing:

Modyfikacja pliku src\app\app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';
 
const routes: Routes = [
  {path:'employees', component: EmployeeComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Zobacz kod na GitHubie i zapisz się na bezpłatny newsletter!

.


Leave a comment

Your email address will not be published.


*


Ta strona wykorzystuje pliki cookie. Używamy informacji zapisanych za pomocą plików cookies w celu zapewnienia maksymalnej wygody w korzystaniu z naszego serwisu. Mogą też korzystać z nich współpracujące z nami firmy badawcze oraz reklamowe. Jeżeli wyrażasz zgodę na zapisywanie informacji zawartej w cookies kliknij na „akceptuję". Jeśli nie wyrażasz zgody, ustawienia dotyczące plików cookies możesz zmienić w swojej przeglądarce. kliknij po więcej informacji

Ta strona wykorzystuje pliki cookie. Używamy informacji zapisanych za pomocą plików cookies w celu zapewnienia maksymalnej wygody w korzystaniu z naszego serwisu. Mogą też korzystać z nich współpracujące z nami firmy badawcze oraz reklamowe. Jeżeli wyrażasz zgodę na zapisywanie informacji zawartej w cookies kliknij na „akceptuję". Jeśli nie wyrażasz zgody, ustawienia dotyczące plików cookies możesz zmienić w swojej przeglądarce.

zamknij