La création d’un simple service REST avec Observable Angular

22 Sep La création d’un simple service REST avec Observable Angular

Comme d’habitude on crée un nouveau projet on utilisant Angular2 CLI par la ligne de commande :

ng new projet-rest

Ensuite on lance notre serveur par la commande :

ng serve

Etape 1 :

La première étape est de créer un model user.ts dans un dossier app/models/

export class User {
   constructor(
      public id: string,
      public name: string,
      public username: string,
      public email: string
   ) {}
}

Etape 2 :

Dans cette étape on va créer notre service user.service.ts dans le dossier app/services/

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { User } from "app/models/user";
 
@Injectable()
export class UserService {
   constructor(private http: Http) {
   }
 
   getUsers(): Observable<User[]> {
      return this.http.get("http://kadri-hamza.com/json/")
         .map((res: Response) => res.json())
         .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
   }
}

Etape 3 :

L’enregistrement du notre service dans app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
 
import { AppComponent } from './app.component';
import { UserService } from "app/services/user.service";
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Etape 4 :

L’utilisation du notre service par le app.component.ts

import { Component } from '@angular/core';
import { UserService } from "app/services/user.service";
 
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app works!';
   users;
 
   constructor(private userService: UserService) {
      this.users = userService.getUsers();
   }
}

Etape 5 :

La visualisation des données dans notre view app.component.html

<div>
<ul>
<li *ngFor="let user of users | async">{{user.name}}</li>
</ul>
</div>

Remarque :

Si vous avez ce problème au niveau du récupération des données et si vous utilisez phpde type :

XMLHttpRequest cannot load .... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ... is therefore not allowed access.

Il faut que vous ajoutez en haut du votre fichier qui génère le json cette ligne

header('Access-Control-Allow-Origin: *');