On peux simuler un server backend avec :

npm install -g json-server

Creer un fichier .json dans le même dossier que notre projet , mais PAS dans le projet.

Naviguer avec cd jusqu'au fichier et faire :

json-server -p 5555 personnes.json

Ensuite on va creer un service qui nous permettra de communiquer avec notre serveur JSON :

export class PersonneService {

  url: string = "<http://localhost:5555/personnes/>";

  constructor(
    private httpclient: HttpClient
  ) {}

  getAll() {
    return this.httpclient.get<Array<Personne>>(this.url)
  }

  addPerson(p: Personne): Observable<Personne[]> {
    return this.httpclient.post<Array<Personne>>(this.url, p);
  }
}

Les méthodes du module HttpClient retournent des OBSERVABLES ! Donc bien penser a s'y abonner!

Utiliser notre service :

(ici le tableau personne: Personne est rempli par un NgModel de mon formulaire )

export class PersonneComponent implements OnInit {

  personne: Personne = {};
  personnes: Array<Personne> = [];

  constructor(private personneService: PersonneService) { }
  ngOnInit() {

    this.personneService.getAll().subscribe(
      (data) => {
        this.personnes = data;
      }
    )
  }
  ajouterPersonne() {
    this.personneService.addPerson(this.personne).subscribe(
      () => {
        this.personneService.getAll().subscribe(
          (res) => {
            this.personnes = res;
          }
        )
      }
    )
  }

}

Quand on recupere nos données c'est sous le format JSON , on aime bien le convertir en Array (clef valeur)

Pour mieux faire nous allons creer un service et outsourcer la communication avec la BDD en dehors des composants:

export class PostService {

  constructor(
    private http: HttpClient
  ) { }

  createAndStorePost(title: string, content: string) {
    const postData: Data = {title, content};
    this.http
    .post<{ name: string }>(
      '<https://recettes-courses.firebaseio.com/posts.json>', postData
    )
    .subscribe(responseData => {
      console.log(responseData);
    });
  }

  fetchPosts() {
    return this.http
    .get<{ [key: string]: Data }>(
      '<https://recettes-courses.firebaseio.com/posts.json>'
    )
    .pipe(
      map(responseData => {
        const postsArray: Data[] = [];
        for (const key in responseData) {
          if (responseData.hasOwnProperty(key)) {
            postsArray.push({ ...responseData[key], id: key });
          }
        }
        return postsArray;
      })
    );
  }

}

//Ensuite on injecte le service dans notre composant et on s'abonne aux resultats : 
export class AppComponent implements OnInit {
  loadedPosts: Data[] = [];
  isFetching = false;

  constructor(
    private postService: PostService
    ) {}

  ngOnInit() {
    this.isFetching = true;
    this.postService.fetchPosts().subscribe(
      (posts: Data[]) => {
        this.isFetching = false;
        this.loadedPosts = posts;
      }
    );
  }

  onCreatePost(postData: Data) {
    // Send Http request
    this.postService.createAndStorePost(postData.title, postData.content);
  }

  onFetchPosts() {
    // Send Http request
    this.isFetching = true;
    this.postService.fetchPosts().subscribe(
      (posts: Data[]) => {
				console.log(posts);
        this.isFetching = false;
        this.loadedPosts = posts;
      }
    );
  }

// Return : 
0: {content: "World", title: "Hello", id: "-M4ijkQDm_YZJpmZo9qC"}
1: {content: "World", title: "Hello", id: "-M4ijkv21j5buOoe6uho"}

On aimerais bien rajouter la gestion des erreurs, pour bien faire nous pouvons creer un subject qui gerera nos erreurs. Et s'y abonner depuis nos composants :

//Creation dans le service : 
error = new Subject<string>();

createAndStorePost(title: string, content: string) {
...
    .subscribe(responseData => {
      console.log(responseData);
    }, (error) => {
      this.error.next(error);
    }
    );
  }

// Utilisation : 
error = null;
private errorSubscription: Subscription;

  ngOnInit() {
    this.errorSubscription = this.postService.error.subscribe(
      (error) => {
        this.error = error;
      }
    );

Les headers :

Ils sont utilisés si notre API ou le serveur web a besoin d'infos supplémentaires, par exemple si on passe une clef d'authentification pour ecrire dans la BDD

fetchPosts() {
    return this.http
    .get<{ [key: string]: Data }>(
      '<https://recettes-courses.firebaseio.com/posts.json>',
      {
        headers: new HttpHeaders({'Custom-Headers': 'Hello', etc...})
      }
    )...