Bu yazıda, Angular projenize nasıl bir JSON Server kurabileceğinizi ve onunla nasıl çalışabileceğinizi adım adım öğreneceksiniz. JSON Server, geliştirme aşamasında hızla bir sahte REST API oluşturmanızı sağlar, böylece API’nız hazır olmadan önce frontend çalışmalarınızı sürdürebilirsiniz.
1. Angular Projenizi Oluşturun
Eğer yeni bir Angular projesi oluşturmadıysanız şu komutu kullanarak oluşturabilirsiniz:
|
1 2 3 |
ng new my-angular-app |
2. JSON Server’ı Kurma
Proje dizininize gidin ve JSON Server’ı npm paket olarak yükleyin:
|
1 2 3 4 |
cd my-angular-app npm install json-server --save-dev |
3. db.json Dosyasını Oluşturma
JSON Server, verilerinizi saklayacağınız bir db.json dosyası üzerinde çalışır. Proje kök dizininize bu dosyayı oluşturun ve içerisine başlangıç verilerinizi ekleyin:
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "users": [ { "id": 1, "name": "Ahmet" }, { "id": 2, "name": "Mehmet" } ] } |
4. JSON Server’ı Çalıştırma
JSON Server’ı çalıştırmak için package.json dosyasında bir npm script’i ekleyin:
|
1 2 3 4 5 6 |
"scripts": { ... "json:server": "json-server --watch db.json" } |
Artık terminalden aşağıdaki komutu çalıştırarak JSON Server’ı başlatabilirsiniz:
|
1 2 3 |
npm run json:server |
Bu komutla JSON Server, 3000 portunda çalışacaktır. Tarayıcınızda http://localhost:3000/users adresine giderek verileri görebilirsiniz.
Bir sonraki yazımızda HTTP isteklerini detaylıca öğreneceğiz; fakat bu yazıda da JSON Server ile küçük bir uygulama olması adına API’ye istek yapmayı göstereceğim.
5. Angular’dan API’ye İstek Yapma
Angular’da HTTP istekleri yapabilmek için HttpClientModule’ü projenize eklemeniz gerekiyor. Önce app.module.ts dosyanıza gidip bu modülü ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ // ... ], imports: [ HttpClientModule, // ... ], providers: [], bootstrap: [AppComponent] }) |
Şimdi, bir servis oluşturarak API’den veri çekebilirsiniz:
|
1 2 3 |
ng generate service user |
user.service.ts dosyasına gidin ve şu metodu ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'http://localhost:3000/users'; constructor(private http: HttpClient) { } getUsers(): Observable<any> { return this.http.get(this.apiUrl); } } |
Artık bu servisi herhangi bir bileşeninizde enjekte ederek verileri alabilirsiniz.
JSON Server, geliştirme sürecinde oldukça faydalı bir araçtır. Angular projelerinizde bu sahte REST API’yi hızla kurup kullanarak, gerçek API’nızın hazır olmasını beklemeden işinizi ilerletebilirsiniz.
Umarım “Angular Projesine JSON Server Kurma ve Çalıştırma” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Servisler ve Bağımlılık Enjeksiyonu
Yeni bir yazımda görüşmek üzere.
Happy coding!
