تحسين تجربة المستخدم في Angular 2: إظهار شاشة التحميل أثناء التنقل

في عالم تطوير الويب باستخدام Angular 2، يعد إظهار شاشة التحميل عند التنقل بين الصفحات أمرًا ذا أهمية خاصة لتعزيز تجربة المستخدم. يمكن تحقيق هذا الهدف من خلال تنفيذ إستراتيجيات فعالة تضمن سلاسة الانتقال بين الروابط دون تأثير سلبي على سرعة الاستجابة. دعنا نستكشف سوياً كيف يمكن تحقيق هذا الهدف في Angular 2.

أولاً وقبل كل شيء، يجب عليك التأكد من تحميل واستيراد الحزمة الخاصة بالتوجيهات من Angular. يمكنك القيام بذلك باستخدام الأمر التالي:

bashCopy code
npm install @angular/router

بعد ذلك، يتوجب عليك إعداد مكون يعتني بعرض شاشة التحميل. يمكنك استخدام متغير منطقي (boolean) للتحكم في إظهار أو إخفاء شاشة التحميل. على سبيل المثال:

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

@Component({
  selector: 'app-loading-screen',
  template: `
    

      
      Loading...
    
    
  `,
  styles: [`
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
  `]
})
export class LoadingScreenComponent {
  isLoading: boolean = false;

  // يمكنك استخدام خدمة المسارات لمراقبة حالة التحميل
  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        this.isLoading = true;
      } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
        this.isLoading = false;
      }
    });
  }
}

يتيح لك هذا المكون عرض شاشة التحميل أثناء التنقل بين الصفحات. تأكد من توفير تصميم جذاب لشاشة التحميل حسب احتياجات تطبيقك.

ثم، لا تنسى تضمين هذا المكون في تكوين التوجيه. يمكنك القيام بذلك من خلال تحديد المكون كعنصر فرعي في ملف تكوين التوجيه (app-routing.module.ts) كما يلي:

typescriptCopy code
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // إضافة مكون شاشة التحميل كعنصر فرعي
  { path: '', component: LoadingScreenComponent, outlet: 'loading' },
];

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

الآن، يمكنك الاستفادة من شاشة التحميل في تطبيق Angular 2 الخاص بك. يتيح لك هذا النهج توفير تجربة مستخدم سلسة ومحسنة أثناء التنقل بين الصفحات، ويعزز من انطباع المستخدم بسلاسة تشغيل التطبيق.

بالطبع، دعنا نعمق أكثر في تفاصيل تنفيذ شاشة التحميل عند التنقل بين الصفحات في Angular 2.

أحد النقاط الرئيسية هي استخدام متغير isLoading في مكون شاشة التحميل (LoadingScreenComponent). يتيح هذا المتغير لك التحكم في إظهار وإخفاء شاشة التحميل بناءً على حالة التنقل. يمكنك أيضاً تخصيص مظهر شاشة التحميل وتحديد موقعها على الصفحة باستخدام الأنماط (CSS) الموجودة في الشيفرة البرمجية.

قد يكون من الجيد أيضاً استخدام خدمة لإدارة حالة التحميل بدلاً من إضافة التفاصيل المتعلقة بشاشة التحميل مباشرة في المكون. يمكنك إنشاء خدمة LoadingService تقوم بإصدار حالات التحميل والتواصل بين المكونات. على سبيل المثال:

typescriptCopy code
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  private loadingSubject = new Subject<boolean>();
  loading$ = this.loadingSubject.asObservable();

  startLoading() {
    this.loadingSubject.next(true);
  }

  stopLoading() {
    this.loadingSubject.next(false);
  }
}

ثم، يمكنك استخدام هذه الخدمة في المكون LoadingScreenComponent لتحديث حالة التحميل بناءً على أحداث التنقل:

typescriptCopy code
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { LoadingService } from '../services/loading.service';

@Component({
  selector: 'app-loading-screen',
  template: `
    

      Loading...
    
    
  `,
  styles: [`
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
  `]
})
export class LoadingScreenComponent implements OnInit {
  isLoading$ = this.loadingService.loading$;

  constructor(private router: Router, private loadingService: LoadingService) {}

  ngOnInit() {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        this.loadingService.startLoading();
      } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
        this.loadingService.stopLoading();
      }
    });
  }
}

هذا النهج يفصل بين مسؤوليات العرض وإدارة حالة التحميل، مما يجعل الشيفرة أكثر تنظيمًا وسهولة في الصيانة.

أخيرًا، يجب أن تأكد من تضمين LoadingScreenComponent في تكوين التوجيه لديك، كما تم الإشارة إليه في الشيفرة البرمجية السابقة. هذا سيضمن تشغيل شاشة التحميل كمكون فرعي عند التنقل بين الصفحات.

باستخدام هذه الإستراتيجيات، يمكنك تحسين تجربة المستخدم عند التنقل بين صفحات تطبيق Angular 2 الخاص بك، وضمان أن عملية التحميل تتم بسلاسة دون أي تأثير سلبي على تفاعل المستخدم.