Developing Angular and ASP.NET Core Applications

Settings Up Web API

Creating data models

Angular ve ASP.NET Core uygulamaları geliştirirken, Web API’yi kurma süreci oldukça önemlidir. Bu süreç, veri modellerini oluşturma adımını içerir ve genellikle veritabanıyla iletişim kurulacağı için oldukça kritiktir.

1. ASP.NET Core Web API Projesi Oluşturma:

İlk adım olarak, ASP.NET Core projesi oluşturmanız gerekmektedir. Bunun için Visual Studio’da veya terminal üzerinden aşağıdaki komutu kullanabilirsiniz:

dotnet new webapi -n MyWebAPI

2. Veri Modellerini Oluşturma:

Veri modelleri, Web API’nin temelini oluşturur. Bu modeller, API üzerinden iletişim kurulan veri nesnelerini temsil eder. Örneğin, bir müşteri veri modeli şöyle olabilir:

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    // Diğer özellikler buraya eklenebilir
}

3. Veri Modellerini Bağlama:

Veri modellerini kullanabilmek için, genellikle bir veritabanı bağlantısı gerekir. ASP.NET Core’da Entity Framework Core bu iş için sıkça tercih edilen bir araçtır. Örneğin, bir veritabanı bağlantısı ve müşteri veri modeli arasındaki ilişkiyi şu şekilde tanımlayabilirsiniz:

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { }

    public DbSet<Customer> Customers { get; set; }
}

4. Veri Modellerini Controller ile İlişkilendirme:

Veri modellerine erişimi sağlamak için, genellikle bir veya daha fazla controller oluşturulur. Bu controller’lar, HTTP isteklerini karşılayarak ilgili işlemleri gerçekleştirir. Örneğin, müşteri veri modeli için bir controller oluşturmak için:

[ApiController]
[Route("api/[controller]")]
public class CustomersController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public CustomersController(ApplicationDbContext context)
    {
        _context = context;
    }

    // GET: api/customers
    [HttpGet]
    public async Task<ActionResult<IEnumerable<Customer>>> GetCustomers()
    {
        return await _context.Customers.ToListAsync();
    }

    // GET: api/customers/5
    [HttpGet("{id}")]
    public async Task<ActionResult<Customer>> GetCustomer(int id)
    {
        var customer = await _context.Customers.FindAsync(id);

        if (customer == null)
        {
            return NotFound();
        }

        return customer;
    }

    // POST: api/customers
    [HttpPost]
    public async Task<ActionResult<Customer>> PostCustomer(Customer customer)
    {
        _context.Customers.Add(customer);
        await _context.SaveChangesAsync();

        return CreatedAtAction(nameof(GetCustomer), new { id = customer.Id }, customer);
    }

    // Diğer HTTP istekleri buraya eklenebilir (PUT, DELETE, vb.)
}

5. Dependency Injection Ayarları:

Controller içinde DbContext gibi servislere ihtiyaç duyulduğunda, ASP.NET Core’un Dependency Injection (DI) mekanizmasından faydalanılır. Bu nedenle, DbContext gibi servisleri ConfigureServices metodunda eklemelisiniz:

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

    services.AddControllers();
}

Sonuç:

Bu adımlar, ASP.NET Core üzerinde bir Web API projesinde veri modellerini oluşturmayı içerir. Bu modelleri kullanarak, API’nin istemcilere nasıl veri sağlayacağını tanımlayabilirsiniz. Bu adımları izleyerek, Web API’lerinizi başarıyla oluşturabilir ve kullanabilirsiniz.

Adding a service and data

Angular ve ASP.NET Core uygulamalarını bir araya getirirken, Web API’ye hizmet eklemek ve veri işleme önemli bir adımdır. Bu, genellikle Angular istemcisi tarafından kullanılacak olan verilerin sağlanmasını içerir.

1. Angular Uygulamasında Servis Oluşturma:

Angular uygulamanızda, Web API’ye erişim sağlamak için bir Angular servisi oluşturmanız gerekmektedir. Bunun için Angular CLI aracılığıyla terminalde aşağıdaki komutu kullanabilirsiniz:

ng generate service data

Bu komut, data.service.ts adında bir TypeScript dosyası oluşturacaktır.

2. Angular Servisi ile HTTP İstekleri Yapma:

Oluşturduğunuz servis içinde, Web API’ye HTTP istekleri yapacak olan fonksiyonları tanımlamanız gerekmektedir. Örneğin, müşterileri getirmek için bir HTTP GET isteği yapmak için:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Customer } from './customer.model';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://localhost:5001/api/customers'; // Web API URL

  constructor(private http: HttpClient) { }

  getCustomers(): Observable<Customer[]> {
    return this.http.get<Customer[]>(this.apiUrl);
  }

  // Diğer HTTP istekleri buraya eklenebilir (POST, PUT, DELETE, vb.)
}

3. Angular Uygulamasında Servisi Kullanma:

Servisi, Angular bileşenlerinde kullanmak için, servisi bileşenin constructor’ına enjekte etmeniz gerekmektedir. Örneğin, bir bileşende müşteri listesini kullanmak için:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Customer } from './customer.model';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {

  customers: Customer[];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.getCustomers();
  }

  getCustomers(): void {
    this.dataService.getCustomers()
      .subscribe(customers => this.customers = customers);
  }
}

Sonuç:

Bu adımlar, Angular uygulamasında bir servis oluşturarak ve bu servisi kullanarak Web API’ye HTTP istekleri yapmayı içerir. Bu sayede Angular istemcisi, ASP.NET Core Web API’si aracılığıyla veri alabilir ve işleyebilir. Bu adımları izleyerek, Angular ve ASP.NET Core’u bir araya getirerek veri akışını sağlayabilirsiniz.

Create API endpoint

Angular ve ASP.NET Core uygulamalarını bir araya getirirken, API endpoint’lerini oluşturmak önemli bir adımdır. Bu endpoint’ler, istemcilerin (Angular uygulaması gibi) API’ye erişim sağlamasını ve belirli işlemleri gerçekleştirmesini sağlar.

1. ASP.NET Core Web API’sinde Controller Oluşturma:

API endpoint’leri oluşturmak için ASP.NET Core Web API projesinde bir veya daha fazla controller sınıfı oluşturmanız gerekir. Örneğin, müşterilerle ilgili işlemleri gerçekleştirecek bir controller oluşturmak için:

using Microsoft.AspNetCore.Mvc;
using MyWebAPI.Models;
using System.Collections.Generic;

namespace MyWebAPI.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class CustomersController : ControllerBase
    {
        private readonly ICustomerRepository _customerRepository;

        public CustomersController(ICustomerRepository customerRepository)
        {
            _customerRepository = customerRepository;
        }

        [HttpGet]
        public IEnumerable<Customer> GetCustomers()
        {
            return _customerRepository.GetCustomers();
        }

        [HttpGet("{id}")]
        public IActionResult GetCustomer(int id)
        {
            var customer = _customerRepository.GetCustomerById(id);

            if (customer == null)
            {
                return NotFound();
            }

            return Ok(customer);
        }

        [HttpPost]
        public IActionResult AddCustomer(Customer customer)
        {
            _customerRepository.AddCustomer(customer);
            return CreatedAtAction(nameof(GetCustomer), new { id = customer.Id }, customer);
        }

        // Diğer HTTP istekleri buraya eklenebilir (PUT, DELETE, vb.)
    }
}

2. Servis Katmanını Oluşturma:

Veri işleme mantığını controller’dan ayırarak, iş mantığını servis katmanına yerleştirmek iyi bir uygulama mimarisi uygulamasıdır. Bu nedenle, bir servis sınıfı oluşturmalısınız. Örneğin:

using MyWebAPI.Models;
using System.Collections.Generic;

namespace MyWebAPI.Services
{
    public interface ICustomerRepository
    {
        IEnumerable<Customer> GetCustomers();
        Customer GetCustomerById(int id);
        void AddCustomer(Customer customer);
        // Diğer CRUD işlemleri buraya eklenebilir
    }

    public class CustomerRepository : ICustomerRepository
    {
        private readonly List<Customer> _customers = new List<Customer>();

        public IEnumerable<Customer> GetCustomers()
        {
            return _customers;
        }

        public Customer GetCustomerById(int id)
        {
            return _customers.Find(c => c.Id == id);
        }

        public void AddCustomer(Customer customer)
        {
            _customers.Add(customer);
        }

        // Diğer CRUD işlemleri buraya eklenebilir
    }
}

3. Dependency Injection Ayarları:

Servis sınıfını, controller’a enjekte etmek için Dependency Injection (DI) kullanmalısınız. Bu, ConfigureServices metodu içinde gerçekleştirilir. Örneğin:

using Microsoft.Extensions.DependencyInjection;
using MyWebAPI.Services;

namespace MyWebAPI
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddScoped<ICustomerRepository, CustomerRepository>();
            services.AddControllers();
        }
        
        // Diğer yapılandırma ayarları buraya eklenebilir
    }
}

Sonuç:

Bu adımlar, ASP.NET Core Web API’sinde bir API endpoint’i oluşturmayı içerir. Bu sayede istemciler (örneğin, Angular uygulaması) API’ye erişebilir ve belirli işlemleri gerçekleştirebilir. Bu adımları izleyerek, API’lerinizi oluşturabilir ve istemcilere hizmet verebilirsiniz.

Read API endpoint

Angular ve ASP.NET Core uygulamaları oluştururken, Web API’lerle iletişim kurma işlemi genellikle bir dizi HTTP isteği kullanılarak gerçekleştirilir.

1. Angular’da HTTP İsteği Gönderme:

Angular uygulamanızda, Web API’den veri almak için HTTP istekleri gönderebilirsiniz. Bunun için Angular’ın HttpClient modülünü kullanabilirsiniz. Örneğin, müşteri verilerini getirmek için bir Angular servisi oluşturabiliriz:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Customer } from './customer.model';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://localhost:5001/api/customers'; // Web API URL

  constructor(private http: HttpClient) { }

  getCustomers(): Observable<Customer[]> {
    return this.http.get<Customer[]>(this.apiUrl);
  }
}

2. ASP.NET Core Web API’de Controller Ayarları:

Web API tarafında, istemcinin (Angular uygulaması gibi) veri taleplerine yanıt vermek için bir controller ayarlanmalıdır. Örneğin, müşteri verilerini getiren bir controller oluşturabiliriz:

using Microsoft.AspNetCore.Mvc;
using MyWebAPI.Models;
using MyWebAPI.Services;
using System.Collections.Generic;

namespace MyWebAPI.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class CustomersController : ControllerBase
    {
        private readonly ICustomerRepository _customerRepository;

        public CustomersController(ICustomerRepository customerRepository)
        {
            _customerRepository = customerRepository;
        }

        [HttpGet]
        public IEnumerable<Customer> GetCustomers()
        {
            return _customerRepository.GetCustomers();
        }

        // Diğer HTTP istekleri buraya eklenebilir (GET by id, POST, PUT, DELETE, vb.)
    }
}

3. Dependency Injection ve Servis Ayarları:

Controller, bir servise (örneğin, veritabanı işlemleri gerçekleştiren bir servis) ihtiyaç duyduğunda, ASP.NET Core’un Dependency Injection (DI) mekanizmasını kullanarak servisi enjekte eder. Bu, ConfigureServices metodu içinde gerçekleştirilir:

using Microsoft.Extensions.DependencyInjection;
using MyWebAPI.Services;

namespace MyWebAPI
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddScoped<ICustomerRepository, CustomerRepository>();
            services.AddControllers();
        }
        
        // Diğer yapılandırma ayarları buraya eklenebilir
    }
}

Sonuç:

Bu adımlar, Angular uygulaması ve ASP.NET Core Web API arasında veri alışverişi için gerekli adımları içerir. Angular istemcisi, HTTP istekleri kullanarak Web API’ye belirli bir endpoint’ten veri talep eder ve Web API bu isteği alarak ilgili veriyi sağlar. Bu şekilde, uygulamalar arasında veri alışverişi sağlanır ve Angular uygulaması Web API’nin sağladığı verileri kullanabilir.

Update API endpoint

Angular ve ASP.NET Core uygulamaları geliştirirken, Web API üzerinde güncelleme işlemlerini gerçekleştirmek önemlidir. Bu, mevcut veriyi değiştirmek veya güncellemek için kullanılır.

1. Angular’da Güncelleme İsteği Gönderme:

Angular uygulamanızda, Web API’ye güncelleme isteği gönderebilirsiniz. Bunun için Angular’ın HttpClient modülünü kullanabilirsiniz. Örneğin, bir müşterinin bilgilerini güncellemek için bir Angular servisi oluşturabiliriz:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Customer } from './customer.model';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://localhost:5001/api/customers'; // Web API URL

  constructor(private http: HttpClient) { }

  updateCustomer(customer: Customer): Observable<Customer> {
    const url = `${this.apiUrl}/${customer.id}`;
    return this.http.put<Customer>(url, customer);
  }
}

2. ASP.NET Core Web API’de Güncelleme İşlemi:

Web API tarafında, istemcinin (Angular uygulaması gibi) gönderdiği güncelleme isteğine yanıt vermek için bir controller’da güncelleme (update) metodu tanımlanmalıdır. Örneğin, bir müşteriyi güncellemek için bir controller metodunu aşağıdaki gibi oluşturabiliriz:

using Microsoft.AspNetCore.Mvc;
using MyWebAPI.Models;
using MyWebAPI.Services;

namespace MyWebAPI.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class CustomersController : ControllerBase
    {
        private readonly ICustomerRepository _customerRepository;

        public CustomersController(ICustomerRepository customerRepository)
        {
            _customerRepository = customerRepository;
        }

        [HttpPut("{id}")]
        public IActionResult UpdateCustomer(int id, Customer customer)
        {
            if (id != customer.Id)
            {
                return BadRequest();
            }

            var existingCustomer = _customerRepository.GetCustomerById(id);
            if (existingCustomer == null)
            {
                return NotFound();
            }

            _customerRepository.UpdateCustomer(customer);

            return NoContent();
        }
    }
}

3. Servis Katmanında Güncelleme İşlemi:

Güncelleme işlemini gerçekleştirmek için, gerekli güncelleme işlemlerini servis katmanında yapmalısınız. Örneğin, bir müşteriyi güncellemek için bir servis metodu aşağıdaki gibi olabilir:

using MyWebAPI.Models;

namespace MyWebAPI.Services
{
    public interface ICustomerRepository
    {
        void UpdateCustomer(Customer customer);
        // Diğer CRUD işlemleri buraya eklenebilir
    }

    public class CustomerRepository : ICustomerRepository
    {
        private readonly List<Customer> _customers = new List<Customer>();

        public void UpdateCustomer(Customer customer)
        {
            var existingCustomer = _customers.Find(c => c.Id == customer.Id);
            if (existingCustomer != null)
            {
                // Müşteri bilgilerini güncelle
                existingCustomer.Name = customer.Name;
                existingCustomer.Email = customer.Email;
                // Diğer özellikler de güncellenebilir
            }
        }

        // Diğer CRUD işlemleri buraya eklenebilir
    }
}

Sonuç:

Bu adımlar, Angular uygulaması ve ASP.NET Core Web API arasında bir API endpoint’ini güncellemek için gerekli adımları içerir. Angular istemcisi, güncelleme isteği göndererek Web API’deki belirli bir kaydı güncelleyebilir ve Web API bu isteği alarak ilgili güncellemeyi gerçekleştirir. Bu şekilde, uygulamalar arasında veri güncelleme işlemi sağlanır ve Angular uygulaması Web API’nin sağladığı güncellenmiş verileri kullanabilir.

Delete API endpoint

Angular ve ASP.NET Core uygulamaları geliştirirken, Web API üzerinde silme işlemlerini gerçekleştirmek de önemlidir. Bu, mevcut veriyi kaldırmak veya silmek için kullanılır.

1. Angular’da Silme İsteği Gönderme:

Angular uygulamanızda, Web API’ye silme isteği gönderebilirsiniz. Bunun için Angular’ın HttpClient modülünü kullanabilirsiniz. Örneğin, bir müşteriyi silmek için bir Angular servisi oluşturabiliriz:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://localhost:5001/api/customers'; // Web API URL

  constructor(private http: HttpClient) { }

  deleteCustomer(id: number): Observable<void> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete<void>(url);
  }
}

2. ASP.NET Core Web API’de Silme İşlemi:

Web API tarafında, istemcinin (Angular uygulaması gibi) gönderdiği silme isteğine yanıt vermek için bir controller’da silme (delete) metodu tanımlanmalıdır. Örneğin, bir müşteriyi silmek için bir controller metodunu aşağıdaki gibi oluşturabiliriz:

using Microsoft.AspNetCore.Mvc;
using MyWebAPI.Services;

namespace MyWebAPI.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class CustomersController : ControllerBase
    {
        private readonly ICustomerRepository _customerRepository;

        public CustomersController(ICustomerRepository customerRepository)
        {
            _customerRepository = customerRepository;
        }

        [HttpDelete("{id}")]
        public IActionResult DeleteCustomer(int id)
        {
            var existingCustomer = _customerRepository.GetCustomerById(id);
            if (existingCustomer == null)
            {
                return NotFound();
            }

            _customerRepository.DeleteCustomer(id);

            return NoContent();
        }
    }
}

3. Servis Katmanında Silme İşlemi:

Silme işlemini gerçekleştirmek için, gerekli silme işlemlerini servis katmanında yapmalısınız. Örneğin, bir müşteriyi silmek için bir servis metodu aşağıdaki gibi olabilir:

using MyWebAPI.Models;

namespace MyWebAPI.Services
{
    public interface ICustomerRepository
    {
        void DeleteCustomer(int id);
        // Diğer CRUD işlemleri buraya eklenebilir
    }

    public class CustomerRepository : ICustomerRepository
    {
        private readonly List<Customer> _customers = new List<Customer>();

        public void DeleteCustomer(int id)
        {
            var existingCustomer = _customers.Find(c => c.Id == id);
            if (existingCustomer != null)
            {
                _customers.Remove(existingCustomer);
            }
        }

        // Diğer CRUD işlemleri buraya eklenebilir
    }
}

Sonuç:

Bu adımlar, Angular uygulaması ve ASP.NET Core Web API arasında bir API endpoint’ini silmek için gerekli adımları içerir. Angular istemcisi, silme isteği göndererek Web API’deki belirli bir kaydı silebilir ve Web API bu isteği alarak ilgili silme işlemini gerçekleştirir. Bu şekilde, uygulamalar arasında veri silme işlemi sağlanır ve Angular uygulaması güncellenmiş verileri Web API aracılığıyla kullanabilir.

Testing API endpoints using Postman

API uç noktalarını test etmek için Postman oldukça yaygın bir araçtır. Postman, API’lerinizi test etmek, sınamak ve hata ayıklamak için kullanılabilen kullanıcı dostu bir platform sağlar. İşte Postman kullanarak API uç noktalarını test etme adımları:

1. Postman İndirme ve Kurulum:

İlk adım olarak, Postman’i resmi web sitesinden indirip bilgisayarınıza kurmanız gerekmektedir. Postman’in web sitesine buradan ulaşabilirsiniz.

2. Postman Projesi Oluşturma:

Postman’in arayüzünde sol üst köşede “New” butonuna tıklayarak yeni bir proje oluşturun. Proje adını ve gerekirse açıklamayı girin.

3. Yeni Bir Request Oluşturma:

Projenizi oluşturduktan sonra sol üst köşede “New” butonuna tıklayarak yeni bir request oluşturun. Bir HTTP metodunu (GET, POST, PUT, DELETE) seçin ve URL’yi girin.

4. Headerları Ayarlama (Opsiyonel):

İstek başlıklarını ayarlamak için “Headers” sekmesine geçin. Burada isteğe özel başlıklar ekleyebilirsiniz. Örneğin, Authorization, Content-Type vb.

5. Body (Gövde) Ayarlama (Opsiyonel):

İstek gövdesini belirlemek için “Body” sekmesine geçin. Burada JSON, form-data, raw (plain text, XML, JSON) gibi seçenekler arasından birini seçerek gövdeyi ayarlayabilirsiniz.

6. Request’i Gönderme:

Request ayarlarınızı tamamladıktan sonra, sağ üst köşede bulunan “Send” butonuna tıklayarak isteği gönderebilirsiniz.

7. Response’i İnceleme:

API’den gelen yanıtı “Response” sekmesinde görebilirsiniz. Bu bölümde yanıtın durum kodu, başlıkları ve gövdesi bulunur.

Kod Örneği:

Örnek olarak, bir GET isteğini test etmek için:

Bu istek, Web API’nizin /api/customers endpoint’ine bir GET isteği gönderecek ve müşteri verilerini döndürecektir.

Postman’i kullanarak diğer HTTP metodlarını (POST, PUT, DELETE vb.) ve farklı endpoint’leri test edebilirsiniz. Bu şekilde, Web API’nizin doğru çalışıp çalışmadığını ve beklenen yanıtları verip vermediğini doğrulayabilirsiniz.

Notlar:

Getting Started with Angular

Angular key concepts

Angular, modern web uygulamaları geliştirmek için kullanılan popüler bir JavaScript çerçevesidir.

1. Components (Bileşenler):

Angular uygulamalarının yapı taşıdır. Bileşenler, HTML şablonları, TypeScript kodu ve CSS stilleri içeren bağımsız, yeniden kullanılabilir ve kendi mantığına sahip parçalardır. Örneğin, bir bileşenin temel yapısı şu şekildedir:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  // Bileşen mantığı buraya gelecek
}

2. Modules (Modüller):

Angular uygulamalarını organize etmek için kullanılır. Modüller, bileşenlerin, servislerin ve diğer Angular özelliklerinin bir araya getirilmesini sağlar. Örneğin, uygulamanızın ana modülü şu şekilde olabilir:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Directives (Yönergeler):

Angular, HTML’e özel özellikler ekleyen ve davranışlarını değiştiren yönergeler içerir. Örneğin, ngIf ve ngFor gibi yaygın kullanılan yönergeler şunlardır:

4. Services (Servisler):

Angular uygulamalarında paylaşılan mantık ve işlevsellik sağlamak için kullanılır. Servisler, bileşenler arasında veri akışını sağlamak, HTTP istekleri yapmak veya uygulama durumunu yönetmek gibi görevleri yerine getirir. Örneğin, bir HTTP servisi şu şekilde olabilir:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Post } from './post.model';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl);
  }
}

5. Dependency Injection (Bağımlılık Enjeksiyonu):

Angular, bağımlılık enjeksiyonunu kullanarak bileşenlerin ve servislerin ihtiyaç duyduğu diğer nesneleri sağlar. Bu, bileşenlerin ve servislerin birbirinden bağımsız olmasını ve daha test edilebilir kod yazılmasını sağlar.

6. Routing (Yönlendirme):

Angular uygulamalarında sayfa yönlendirmesi sağlayan bir yapıdır. Bu, farklı bileşenlerin farklı URL’lere göre görüntülenmesini sağlar. Örneğin, bir yönlendirme tanımı şu şekildedir:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Bu kavramlar, Angular’ın temel yapı taşlarını oluşturur ve modern web uygulamaları geliştirmek için kullanılır. Bu kavramlarla daha derinlemesine çalışarak Angular uygulamalarınızı daha etkili bir şekilde geliştirebilirsiniz.

Generating components and services

Angular uygulaması geliştirirken, bileşenler ve servisler oluşturmak oldukça yaygın bir ihtiyaçtır. Bileşenler, kullanıcı arayüzünü oluşturan ve belirli bir işlevselliği temsil eden parçalardır. Servisler ise, uygulamanın farklı bileşenleri arasında veri paylaşımını ve iş mantığını sağlarlar.

Bileşen (Component) Oluşturma:

Angular CLI (Command Line Interface), hızlı ve verimli bir şekilde bileşenler oluşturmanızı sağlar. Terminal veya komut istemcisinde aşağıdaki komutu kullanarak yeni bir bileşen oluşturabilirsiniz:

ng generate component example

Bu komut, example adında yeni bir bileşen oluşturur. Oluşturulan bileşenin dosyaları, projenizin src/app dizinindeki bir klasör içinde bulunur. Oluşturulan bileşenin kod örneği aşağıdaki gibidir:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Servis (Service) Oluşturma:

Servisler, uygulamanın farklı bileşenleri arasında veri paylaşımını ve iş mantığını sağlarlar. Angular CLI ile yeni bir servis oluşturmak için terminal veya komut istemcisinde aşağıdaki komutu kullanabilirsiniz:

ng generate service example

Bu komut, example adında yeni bir servis oluşturur. Oluşturulan servisin dosyaları, projenizin src/app dizinindeki bir klasör içinde bulunur. Oluşturulan servisin kod örneği aşağıdaki gibidir:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ExampleService {

  constructor() { }

}

Bileşen ve Servis Kullanımı:

Oluşturulan bileşenler ve servisler, diğer bileşenler içinde kullanılabilir. Örneğin, bir bileşen içinde bir servisi kullanmak için:

import { Component, OnInit } from '@angular/core';
import { ExampleService } from '../example.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor(private exampleService: ExampleService) { }

  ngOnInit(): void {
  }

}

Angular CLI, bileşenlerin ve servislerin oluşturulmasını ve proje yapılarının düzenlenmesini kolaylaştırır. Bu sayede daha düzenli, bakımı kolay ve daha okunabilir bir kod tabanı oluşturabilirsiniz.

Cleaning up code and updating the router

Angular uygulamaları geliştirirken, kodunuzu temiz tutmak ve güncellemek önemlidir. Ayrıca, uygulamanızın yönlendirme (routing) yapısını güncellemek de gerekebilir.

1. Kod Temizleme:

Kodunuzu temizlemek için aşağıdaki adımları takip edebilirsiniz:

2. Yönlendiriciyi Güncelleme:

Angular’da yönlendiriciyi güncellemek için aşağıdaki adımları izleyebilirsiniz:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NewPageComponent } from './new-page/new-page.component'; // Yeni sayfa bileşeni

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'new-page', component: NewPageComponent } // Yeni sayfa rotası
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Yönlendirme Linkleri Güncelleme: Menülerde veya diğer bileşenlerde kullanılan yönlendirme linklerini güncelleyin. Örneğin:

<!-- Menüde yeni sayfaya yönlendirme linki -->
<a routerLink="/new-page">New Page</a>

Yönlendirme Yöntemlerini Güncelleme: Programatik olarak yönlendirme yapmak için Angular’ın Router servisini kullanabilirsiniz. Örneğin, bir düğmeye tıklandığında yeni sayfaya yönlendirme yapmak için:

import { Router } from '@angular/router';

constructor(private router: Router) { }

redirectToNewPage() {
  this.router.navigate(['/new-page']);
}

Yukarıdaki adımları takip ederek, Angular uygulamanızdaki kodu temizleyebilir ve yönlendirme yapısını güncelleyebilirsiniz. Bu, uygulamanızı daha düzenli ve yönetilebilir hale getirecektir.

Designing the Books page

“Books page” tasarımı, bir Angular uygulamasında kitapların listelendiği ve ayrıntılarının görüntülendiği bir sayfa olabilir. Bu sayfanın tasarımı ve geliştirilmesi için aşağıdaki adımları izleyebiliriz:

1. Component Oluşturma:

İlk adım olarak, kitapların listeleneceği bir bileşen oluşturmalıyız. Angular CLI ile yeni bir bileşen oluşturabiliriz. Terminal veya komut istemcisinde şu komutu kullanabiliriz:

ng generate component books

Bu komut, books adında yeni bir bileşen oluşturur. Bileşen dosyaları, src/app/books dizininde bulunur.

2. Kitap Verilerini Alma:

Kitap verilerini almak için genellikle bir servis kullanılır. Örneğin, bir BookService oluşturabiliriz ve kitap verilerini sağlayabiliriz.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Book } from './book.model';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  getBooks(): Observable<Book[]> {
    return this.http.get<Book[]>(this.apiUrl);
  }
}

3. Books Component’inin Tasarımı:

Oluşturduğumuz books bileşeninin HTML şablonunu tasarlayabiliriz. Kitapları listeleyecek ve gerektiğinde ayrıntıları gösterecek bir tasarım oluşturmalıyız.

<!-- books.component.html -->

<div *ngIf="books.length > 0; else noBooks">
  <h2>Books</h2>
  <ul>
    <li *ngFor="let book of books">
      <a [routerLink]="['/books', book.id]">{{ book.title }}</a>
    </li>
  </ul>
</div>
<ng-template #noBooks>
  <p>No books available.</p>
</ng-template>

4. Books Component’inin Kodu:

Bileşenin TypeScript dosyasında, kitap verilerini almak için servisi kullanarak bileşenin veri mantığını oluşturmalıyız.

import { Component, OnInit } from '@angular/core';
import { Book } from '../book.model';
import { BookService } from '../book.service';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
  books: Book[] = [];

  constructor(private bookService: BookService) { }

  ngOnInit(): void {
    this.getBooks();
  }

  getBooks(): void {
    this.bookService.getBooks()
      .subscribe(books => this.books = books);
  }
}

5. Routing ve Detay Sayfası:

Kitapların detaylarını gösterecek bir detay sayfası oluşturmalıyız. Bunun için routing ayarlarını yapmalıyız ve bir detay bileşeni oluşturmalıyız.

Örnek Routing Tanımı:

const routes: Routes = [
  { path: 'books', component: BooksComponent },
  { path: 'books/:id', component: BookDetailComponent }
];

Detay Bileşeni Tasarımı:

<!-- book-detail.component.html -->

<div *ngIf="book">
  <h2>{{ book.title }}</h2>
  <p><strong>Author:</strong> {{ book.author }}</p>
  <p><strong>Description:</strong> {{ book.description }}</p>
</div>

Bu adımları takip ederek, Angular uygulamanızda “Books page” için bir bileşen oluşturabilir ve tasarlayabilirsiniz. Bu sayede kullanıcılar kitapları listeleyebilir ve her bir kitabın ayrıntılarını görebilirler.

Reading data from Angular

Angular uygulamalarında veri okuma işlemi genellikle HTTP istekleriyle dış API’lerden veya yerel veri kaynaklarından yapılır. Bu süreci anlamak için, Angular’ın HTTP istekleri için HttpClient modülünü ve gelen veriyi bileşenlerde işlemek için Observable’ları kullanırız.

1. HttpClient Modülünü Kullanma:

Angular, HTTP isteklerini yapmak için yerleşik HttpClient modülünü sağlar. Öncelikle, bu modülü kullanarak bir HTTP isteği yaparız. Bunun için öncelikle HttpClientModule‘i uygulamanıza eklemeniz gerekmektedir. Bunun için app.module.ts dosyanıza ekleyebilirsiniz:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule { }

2. Veri Okuma İsteği Gönderme:

HTTP isteği göndermek için HttpClient modülünü bir bileşende kullanabiliriz. Örneğin, bir kitap servisi üzerinden kitap verilerini almak için bir bileşen içinde şu şekilde kullanabiliriz:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
  books: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<any[]>('https://api.example.com/books')
      .subscribe(books => {
        this.books = books;
      });
  }
}

3. Observable Kullanma:

HttpClient modülü asenkron HTTP istekleri yapar ve sonuçları bir Observable olarak döndürür. Bu nedenle, veriyi almak için subscribe işlevini kullanmamız gerekmektedir. Böylece, HTTP isteği tamamlandığında gelen veriyi işleyebiliriz.

4. Veriyi İşleme:

Gelen veriyi işlemek ve bileşenin şablonunda kullanmak için bileşen sınıfındaki değişkenlere atarız. Bu değişkenler daha sonra bileşenin HTML şablonunda kullanılabilir.

Örnek Kullanım:

<!-- books.component.html -->

<div *ngFor="let book of books">
  <h2>{{ book.title }}</h2>
  <p><strong>Author:</strong> {{ book.author }}</p>
  <p><strong>Description:</strong> {{ book.description }}</p>
</div>

Yukarıdaki adımları izleyerek, Angular uygulamanızda dış API’lerden veya başka kaynaklardan veri okuma işlemini gerçekleştirebilirsiniz. Bu sayede, kullanıcılarınızın uygulamada dinamik içerikler görmesini sağlayabilirsiniz.

Designing the Create page

“Create page” tasarımı, kullanıcıların yeni içerik oluşturabileceği bir sayfayı ifade eder. Örneğin, yeni bir kitap eklemek için bir form içeren bir sayfa olabilir. Bu sayfanın tasarımını ve geliştirmesini yapmak için aşağıdaki adımları izleyebiliriz:

1. Component Oluşturma:

İlk adım olarak, yeni içeriğin oluşturulacağı bir bileşen oluşturmalıyız. Angular CLI ile yeni bir bileşen oluşturabiliriz. Terminal veya komut istemcisinde şu komutu kullanabiliriz:

ng generate component create-book

Bu komut, create-book adında yeni bir bileşen oluşturur. Bileşen dosyaları, src/app/create-book dizininde bulunur.

2. Form Tasarımı:

Yeni içerik oluşturmak için bir form tasarlamamız gerekmektedir. Form, kullanıcıdan gerekli bilgileri almalıdır. Örneğin, yeni bir kitap eklemek için bir form tasarlayabiliriz:

<!-- create-book.component.html -->

<form (submit)="onSubmit()">
  <div>
    <label>Title: </label>
    <input type="text" [(ngModel)]="newBook.title" name="title" required>
  </div>
  <div>
    <label>Author: </label>
    <input type="text" [(ngModel)]="newBook.author" name="author" required>
  </div>
  <div>
    <label>Description: </label>
    <textarea [(ngModel)]="newBook.description" name="description" required></textarea>
  </div>
  <button type="submit">Create Book</button>
</form>

3. Component Kodu:

Form verilerini işlemek için bileşenin TypeScript dosyasında gerekli kodu eklemeliyiz. Örneğin:

import { Component } from '@angular/core';
import { BookService } from '../book.service';

@Component({
  selector: 'app-create-book',
  templateUrl: './create-book.component.html',
  styleUrls: ['./create-book.component.css']
})
export class CreateBookComponent {
  newBook = { title: '', author: '', description: '' };

  constructor(private bookService: BookService) { }

  onSubmit(): void {
    this.bookService.createBook(this.newBook)
      .subscribe(() => {
        // Yeni kitap başarıyla oluşturulduğunda yapılacak işlemler
        // Örneğin, kullanıcıyı başka bir sayfaya yönlendirebiliriz
      });
  }
}

4. Servis Oluşturma:

Yeni içeriği oluşturmak için bir servis oluşturmalıyız. Bu servis, HTTP isteği göndererek yeni içeriği backend’e kaydetmelidir. Örneğin:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  createBook(newBook: any) {
    return this.http.post(this.apiUrl, newBook);
  }
}

5. Form İşleme ve Geri Bildirim:

Formun gönderilmesini ve yeni içeriğin oluşturulmasını takiben, kullanıcıya geri bildirim sağlamak önemlidir. Başarılı bir şekilde içerik oluşturulduğunda veya bir hata meydana geldiğinde kullanıcıya uygun bir mesaj gösterilmelidir.

Yukarıdaki adımları takip ederek, Angular uygulamanızda bir “Create page” tasarlayabilir ve yeni içerik oluşturma işlemini gerçekleştirebilirsiniz. Bu sayede kullanıcılar uygulamanıza yeni içerikler ekleyebilir ve veri tabanınızı güncelleyebilirsiniz.

Adding new data from Angular

Angular uygulamalarında yeni veri eklemek genellikle bir form kullanılarak yapılır. Kullanıcılar formu doldurarak yeni veriyi girer ve bu veri daha sonra bir HTTP isteği aracılığıyla backend’e gönderilir.

1. Form Oluşturma:

Öncelikle, yeni veriyi girmek için bir form oluşturmalısınız. Angular’da form oluşturmak için Angular Forms modülünü kullanabilirsiniz. Örneğin, yeni bir kitap eklemek için bir form oluşturalım:

<!-- new-book-form.component.html -->

<form (submit)="onSubmit()">
  <div>
    <label>Title:</label>
    <input type="text" [(ngModel)]="newBook.title" name="title" required>
  </div>
  <div>
    <label>Author:</label>
    <input type="text" [(ngModel)]="newBook.author" name="author" required>
  </div>
  <div>
    <label>Description:</label>
    <textarea [(ngModel)]="newBook.description" name="description" required></textarea>
  </div>
  <button type="submit">Add Book</button>
</form>

2. Component Kodu:

Formun submit olayını işleyen bir bileşen oluşturmalısınız. Bileşen, formdan alınan veriyi HTTP isteği ile backend’e gönderecek. Örneğin:

import { Component } from '@angular/core';
import { BookService } from '../book.service';

@Component({
  selector: 'app-new-book-form',
  templateUrl: './new-book-form.component.html',
  styleUrls: ['./new-book-form.component.css']
})
export class NewBookFormComponent {
  newBook = { title: '', author: '', description: '' };

  constructor(private bookService: BookService) { }

  onSubmit(): void {
    this.bookService.addBook(this.newBook)
      .subscribe(() => {
        // Yeni kitap başarıyla eklendiğinde yapılacak işlemler
        // Örneğin, kullanıcıyı başka bir sayfaya yönlendirebiliriz
      });
  }
}

3. Servis Oluşturma:

Yeni veriyi backend’e göndermek için bir servis oluşturmalısınız. Bu servis, HTTP POST isteği göndererek yeni veriyi backend’e kaydedecektir. Örneğin:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  addBook(newBook: any) {
    return this.http.post(this.apiUrl, newBook);
  }
}

4. Geri Bildirim Sağlama:

Formun gönderilmesini ve yeni verinin başarıyla eklenip eklenmediğini kullanıcıya bildirmek önemlidir. Başarılı bir şekilde veri eklediğinde veya bir hata meydana geldiğinde kullanıcıya uygun bir mesaj gösterilmelidir.

Yukarıdaki adımları takip ederek, Angular uygulamanızda yeni veri ekleyebilir ve kullanıcıların uygulamanıza veri eklemesine izin verebilirsiniz. Bu sayede, uygulamanızın veri tabanını güncelleyebilir ve dinamik içerikler oluşturabilirsiniz.

Designing the Book Details page

“Book Details page” tasarımı, bir kitabın detaylarının görüntülendiği bir sayfayı ifade eder. Bu sayfa genellikle bir kitabın başlık, yazar, açıklama gibi özelliklerini ve gerektiğinde diğer ilgili bilgileri gösterir.

1. Component Oluşturma:

İlk adım olarak, kitap detaylarının gösterileceği bir bileşen oluşturmalısınız. Angular CLI ile yeni bir bileşen oluşturabilirsiniz. Terminal veya komut istemcisinde şu komutu kullanabilirsiniz:

ng generate component book-details

Bu komut, book-details adında yeni bir bileşen oluşturur. Bileşen dosyaları, src/app/book-details dizininde bulunur.

2. Book Details Component Tasarımı:

Kitap detaylarını gösterecek olan bileşenin HTML şablonunu tasarlamalısınız. Örneğin:

<!-- book-details.component.html -->

<div *ngIf="book">
  <h2>{{ book.title }}</h2>
  <p><strong>Author:</strong> {{ book.author }}</p>
  <p><strong>Description:</strong> {{ book.description }}</p>
</div>

3. Book Details Component Kodu:

Bileşenin TypeScript dosyasında, kitap detaylarını almak ve bileşenin şablonunda kullanmak için gerekli kodu eklemelisiniz. Örneğin:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BookService } from '../book.service';

@Component({
  selector: 'app-book-details',
  templateUrl: './book-details.component.html',
  styleUrls: ['./book-details.component.css']
})
export class BookDetailsComponent implements OnInit {
  book: any;

  constructor(
    private route: ActivatedRoute,
    private bookService: BookService
  ) { }

  ngOnInit(): void {
    this.getBookDetails();
  }

  getBookDetails(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.bookService.getBookById(id)
      .subscribe(book => this.book = book);
  }
}

4. Book Service ve Routing Güncellemeleri:

Kitap detaylarını almak için bir servis oluşturmalısınız ve routing ayarlarınızı güncellemelisiniz. Örneğin:

// book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  getBookById(id: number) {
    return this.http.get(`${this.apiUrl}/${id}`);
  }
}

// app-routing.module.ts

const routes: Routes = [
  { path: 'books/:id', component: BookDetailsComponent }
];

5. Linkleri Güncelleme:

Kitapların listelendiği sayfada, her kitabın detaylarına yönlendiren linklerin düzenlenmesi gerekmektedir. Örneğin:

<!-- books.component.html -->

<div *ngFor="let book of books">
  <h2><a [routerLink]="['/books', book.id]">{{ book.title }}</a></h2>
  <p><strong>Author:</strong> {{ book.author }}</p>
</div>

Yukarıdaki adımları takip ederek, Angular uygulamanızda “Book Details page” tasarlayabilir ve kullanıcıların herhangi bir kitabın detaylarını görüntülemesini sağlayabilirsiniz. Bu sayede, kullanıcılar kitapların detaylarını kolayca görebilir ve uygulamanızın kullanılabilirliğini artırabilirsiniz.

Getting a single book from Angular

Angular uygulamalarında, tek bir kitabın detaylarını almak genellikle bir HTTP isteği ile yapılır. Bu, genellikle bir servis aracılığıyla gerçekleştirilir ve kullanıcı belirli bir kitabın detaylarını görüntülemek istediğinde tetiklenir.

1. Servis Oluşturma:

Öncelikle, kitap detaylarını almak için bir servis oluşturmalısınız. Bu servis, backend ile iletişim kurarak belirli bir kitabın detaylarını alacaktır. Angular CLI ile bir servis oluşturabilirsiniz:

ng generate service book

Bu komut, book adında yeni bir servis oluşturur. Servis dosyaları, src/app/book dizininde bulunur.

2. Book Service Kodu:

Servis dosyasında, backend’den kitap detaylarını almak için gerekli HTTP isteğini gönderen bir metod yazmalısınız. Örneğin:

// book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Book } from './book.model';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  getBookById(id: number): Observable<Book> {
    return this.http.get<Book>(`${this.apiUrl}/${id}`);
  }
}

3. Book Modeli Oluşturma:

Book veri modelini oluşturmalısınız. Bu model, backend’den alınan kitap detaylarını temsil edecektir. Örneğin:

// book.model.ts

export interface Book {
  id: number;
  title: string;
  author: string;
  description: string;
}

4. Component Kodu:

Kitap detaylarını almak için bir bileşen oluşturmalısınız. Bu bileşen, servisi kullanarak belirli bir kitabın detaylarını almalıdır. Örneğin:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Book } from '../book.model';
import { BookService } from '../book.service';

@Component({
  selector: 'app-book-details',
  templateUrl: './book-details.component.html',
  styleUrls: ['./book-details.component.css']
})
export class BookDetailsComponent implements OnInit {
  book: Book;

  constructor(
    private route: ActivatedRoute,
    private bookService: BookService
  ) { }

  ngOnInit(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.bookService.getBookById(id)
      .subscribe(book => this.book = book);
  }
}

5. Component Şablonu:

Bileşenin HTML şablonunda, alınan kitap detaylarını göstermek için gerekli HTML kodunu eklemelisiniz. Örneğin:

<!-- book-details.component.html -->

<div *ngIf="book">
  <h2>{{ book.title }}</h2>
  <p><strong>Author:</strong> {{ book.author }}</p>
  <p><strong>Description:</strong> {{ book.description }}</p>
</div>

Yukarıdaki adımları takip ederek, Angular uygulamanızda tek bir kitabın detaylarını alabilir ve kullanıcılarınıza görüntüleyebilirsiniz. Bu sayede, kullanıcılarınız uygulamanızdaki herhangi bir kitabın detaylarını kolayca görüntüleyebilirler.

Updating existing data from Angular

Angular uygulamalarında mevcut veriyi güncellemek genellikle bir form aracılığıyla yapılır. Kullanıcılar formu doldurarak mevcut veriyi günceller ve bu güncelleme daha sonra bir HTTP isteği aracılığıyla backend’e gönderilir.

1. Form Oluşturma:

Öncelikle, mevcut veriyi güncellemek için bir form oluşturmalısınız. Angular’da form oluşturmak için Angular Forms modülünü kullanabilirsiniz. Örneğin, bir kitabın detaylarını güncellemek için bir form oluşturalım:

<!-- update-book-form.component.html -->

<form (submit)="onSubmit()">
  <div>
    <label>Title:</label>
    <input type="text" [(ngModel)]="book.title" name="title" required>
  </div>
  <div>
    <label>Author:</label>
    <input type="text" [(ngModel)]="book.author" name="author" required>
  </div>
  <div>
    <label>Description:</label>
    <textarea [(ngModel)]="book.description" name="description" required></textarea>
  </div>
  <button type="submit">Update Book</button>
</form>

2. Component Kodu:

Formun submit olayını işleyen bir bileşen oluşturmalısınız. Bileşen, formdan alınan güncellenmiş veriyi HTTP isteği ile backend’e gönderecek. Örneğin:

import { Component, Input } from '@angular/core';
import { Book } from '../book.model';
import { BookService } from '../book.service';

@Component({
  selector: 'app-update-book-form',
  templateUrl: './update-book-form.component.html',
  styleUrls: ['./update-book-form.component.css']
})
export class UpdateBookFormComponent {
  @Input() book: Book;

  constructor(private bookService: BookService) { }

  onSubmit(): void {
    this.bookService.updateBook(this.book)
      .subscribe(() => {
        // Kitap başarıyla güncellendiğinde yapılacak işlemler
        // Örneğin, kullanıcıyı başka bir sayfaya yönlendirebiliriz
      });
  }
}

3. Servis Oluşturma:

Mevcut veriyi backend’e göndermek için bir servis oluşturmalısınız. Bu servis, HTTP PUT isteği göndererek mevcut veriyi backend’de güncellemelidir. Örneğin:

// book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Book } from './book.model';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  updateBook(book: Book): Observable<Book> {
    return this.http.put<Book>(`${this.apiUrl}/${book.id}`, book);
  }
}

4. Component Kullanımı:

Mevcut veriyi güncellemek için bileşeni kullanmalısınız. Örneğin, güncelleme formunu kitap detaylarını gösteren bileşene yerleştirebilirsiniz.

Yukarıdaki adımları takip ederek, Angular uygulamanızda mevcut veriyi güncelleyebilir ve kullanıcıların uygulamanızdaki verileri kolayca güncellemesini sağlayabilirsiniz. Bu sayede, uygulamanızın veri tabanını güncelleyebilir ve kullanıcı deneyimini artırabilirsiniz.

Deleting data from Angular

Angular uygulamalarında veri silme genellikle bir kullanıcı eylemiyle tetiklenir, örneğin bir düğmeye tıklama veya bir onay işareti verme gibi. Kullanıcı bu eylemi gerçekleştirdiğinde, silinecek veriye ilişkin bilgiler bir HTTP DELETE isteği aracılığıyla backend’e gönderilir.

1. Silme İsteğini Gönderme:

Öncelikle, silinecek veriyi backend’den silmek için bir HTTP DELETE isteği göndermeniz gerekir. Bunun için bir servis oluşturmanız ve bu servis aracılığıyla backend’e bir HTTP DELETE isteği yapmanız gerekir. Örneğin:

// book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'https://example.com/api/books';

  constructor(private http: HttpClient) { }

  deleteBook(id: number): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}