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:
- https://nodejs.org/en/ – instalujemy Node.js o menedżera pakietów npm
- Angular CLI 8 – polecenie – npm install -g @angular/cli
Weryfikujemy wersję menedżera pakietów – npm:
npm -versionwynik:
6.13.4
weryfikujemy wersję CLI (z ang. Command Line Interface):
ng --versionwynik:
Angular CLI: 9.0.6Nowy projekt:
ng new JavaLeaderAngularApptestujemy 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 { }
Leave a comment