عرض قائمة users وجلبها عبر API من قاعدة البيانات

في هذا الدرس سنقوم بتجربة حقيقية لعرض قائمة المستخدمين  الدين قمنا بانشائهم يودويا من قاعدة البيانات

وسير عمل هده العملية ستكون كالتالي

1. المكون  component  سيرسل طلبية الى ملف الخدمة الذي سننشأه بجلب بيانات المستخدمين  
2. ملف الخدمة يستجيب للطلب ويقوم بارسال الطلب الى api
3. الـ api يقوم بمعالجة الطلب ويتفقد قاعدة البيانات  ثم يعيد النتائج الى ملف الخدمة service على شكل بيانات json
4. ملف الخدمة سيتلقى الرد من webapi وسيحول الرد الى المكون
5. المكون سيعالج الرد ويرسله الى ملف template الخاص به
6. ملف template الخاص بالمكون سيستعرض اما جدول المستخدمين  اما خطأ ما لسبب معين .. اما بيانات فارغة بسبب عدم وجود مستخدمين بقاعدة البيانات

  ونلخص هده النقاط على هدا الشكل

A. علينا أولا ان ننشيء ملف الخدمة service ولنسمه مثلا user.service . انشيء مجلد داخل app وسمه services حيث سنضع داخله ملفات الخدمة التي نحتاج اليها 

/src/app/services/user.service.ts

ng generate service services/user

قم بتضمين ملف الخدمة بالموديول module

import { UserService } from './services/user.service'; // +

  providers: [
    UserService,  //+
  ],

B. ننشيء  الدالة  getUsers التي تقوم بطلب البيانات من ملف الخدمة الى api  عن طريق GET Method

افتح ملف الخدمة واضف الدالة 

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';  //+
import { map } from 'rxjs/operators';  //+

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

  constructor(public httpClient: HttpClient,) { }  //+


  getUsers(url:string){  //+
   return  this.httpClient.get(url)
      .pipe(
        map(res => res) 
      );
  }

}

بما اننا استخدمنا  موديول HttpClient الخاص بالتواصل عبر برتوكول http  مع api فيجب علينا تضمين هذا الموديول بملف app.module  حتى يتعرف عليه

افتح ملف app.module وقم بتضمينه

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

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule, // + here
  ],

ليصبح ملف module بهدا الشكل

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserService } from './services/user.service';
import { HttpClientModule } from '@angular/common/http';

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

 C. بعد ذلك ننشيء الطلبية بالمكون app.component سننشيئ دالة بالـ component تقوم  بعمل قناة بين المكون وملف الخدمة حيث هدفها هو الاتصال بملف الخدمة لارسال الطلب واستقبال النتيجة

قم بتمهيد كائن  عن ملف الخدمة بدالة constractor + قم بتضمين ملف الخدمة بال component

import { UserService } from '../user.service';

  constructor(public usersService:UserService, ) {
  }

انشيء الطلبية بدالة init 

 ngOnInit() {
    this.usersService.getUsers('http://localhost/webapi/api.php/users?transform=1')
    .subscribe(
        result => {
           let response:any = result; 
           this.users = response.users; // النتائج تعطي عدة قيم
           console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح

        },
        error => {
            console.log(error);
        }
    );
  }

ليصبح المكون بهذا الشكل

import { UserService } from './services/user.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 public users;

  constructor(public usersService:UserService, ) {
  }
  
  ngOnInit() {
    this.usersService.getUsers('http://localhost/webapi/api.php/users?transform=1')
    .subscribe(
        result => {
           let response:any = result; 
           this.users = response.users; // النتائج تعطي عدة قيم
           console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح

        },
        error => {
            console.log(error);
        }
    );
  }


}

D. احفظ الكل وافتح debugger عن طريق F12 ثم اختر نافدة Console لنتتبع النتائج

لاتنسى تشغيل سرفر apache لكي يقوم بمعالجة api

ng serve

الان لم يتبقى سوى استعراض النتائج في جدول بملف template

افتح app.component.html واضف الجدول

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">CRUD</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
    </ul>
    <a class="btn btn-outline-success my-2 my-sm-0" >Login</a>
    <a class="btn btn-outline-success my-2 my-sm-0" >Register</a>
  </div>
</nav>

<br>
<br>

<div class="container">
  <table *ngIf='users' class="table table-dark">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
        <th scope="col">password</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor='let user of users'>
            <th scope="row">{{  user.id  }}</th>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </tbody>
  </table>
</div>

النتيجة على المتصفح

الدروس السابقة :

1. المستوى الثاني من Angular 
2. انشاء واختيار api مع قاعدة البيانات mysql - Angular 
3. انشاء وتمهيد مشروع الدورة angular 
4. دمج bootstrap & jquery داخل مشروع angular 
5. انشاء الصفحة الرئيسية للتطبيق angular 
6. ماهو الفرق بين API و REST API وماهي وظفتهما - angular