واکشی و نمایش داده ها در زاویه ای با استفاده از httpresource – جامعه dev

رسیدگی به داده های واکشی و نمایش در برنامه های زاویه ای برای ایجاد تجربیات کاربر پویا و تعاملی بسیار مهم است. در این پست وبلاگ ، ما نحوه استفاده را بررسی خواهیم کرد httpResource برای واکشی داده ها از یک API و نمایش آن در قالب کاربر پسند.

ما یک برنامه وبلاگ ساده ایجاد خواهیم کرد که پست های API JsonPlaceholder را واگذار می کند و آنها را در یک طرح شبکه نمایش می دهد.

بررسی اجمالی پروژه

ما یک برنامه زاویه ای ساخته ایم که:

• استفاده می کند Angular CLI (V19.2.0) برای راه اندازی پروژه
• پست های وبلاگ را از API JsonPlaceholder دریافت می کند.
• پست ها را در یک طرح شبکه با استفاده از خطا نشان می دهد.
• لوازم جانبی اجزای مستقل برای معماری تمیزتر.

بیایید به جزئیات شیرجه بزنیم!

1. تنظیم پروژه زاویه ای

برای ایجاد یک برنامه زاویه ای ، اگر قبلاً این کار را نکرده اید ، Angular CLI را نصب کنید:

npm install -g @angular/cli

سپس ، یک پروژه جدید ایجاد کنید:

ng new angular-examples
cd angular-examples

سرور توسعه را شروع کنید:

ng serve

اکنون ، باز http://localhost:4200/ در مرورگر خود

2. ایجاد مؤلفه وبلاگ

مؤلفه وبلاگ پست های JsonPlaceHolder را به دست می آورد و آنها را در یک طرح شبکه به نمایش می گذارد.

کد مؤلفه: app.component.ts

import { httpResource } from '@angular/common/http';
import { Component, computed, Resource } from '@angular/core';

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'angular-blog';

  apiUrl = 'https://jsonplaceholder.typicode.com';

  posts = httpResource<Post[]>(`${this.apiUrl}/posts`);
  error = computed(() => {
    const error = this.posts.error() as Error;
    return error ? error.message : null;
  });

  constructor() {}
}

توضیح

• ما تعریف می کنیم Post رابط برای مدل سازی پاسخ API.
• ما استفاده می کنیم httpResource برای واکشی پست های وبلاگ.
• computed() برای رسیدگی به خطاهای API به صورت پویا استفاده می شود.

3 نمایش پست های وبلاگ

پست های واکشی در نمایش داده می شوند app.component.html پرونده

کد الگوی: app.component.html

 class="container">
  

    Blog Posts
  

  @if (posts.isLoading()) {
    
 class="loading">
      Loading posts...
      
 class="spinner">
    
  } @else {
    @if (error()) {
      
 class="error">
        Error loading posts: {{ error() }}
      
    } @else {
      
 class="posts-grid">
        @for (post of posts.value(); track post.id) {
          
 class="post-card">
            
{{ post.title }}
            {{ post.body }}
            
        }
      
    }
  }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 2rem;
}

.loading, .error {
  text-align: center;
  padding: 2rem;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.post-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-card h2 {
  color: #2c3e50;
  font-size: 1.5rem;
}

.post-card p {
  color: #34495e;
}

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter([]),
    provideHttpClient(),
  ],
};

ng serve