0

I am currently learning angular using the angular tour of heroes. I am slightly getting the concepts by following the examples. I am now in adding a new hero. For those who finished the tutorial, I just have question.

In the add hero, I can't get my head around it. Would you help me understand how the addHero() method added the new hero on the server? I am expecting a method that will do this. But I didn't see any add method.

I came from PHP/JS, jQuery background. So I was expecting something like this

  1. addHero() method in hero.component.ts
  2. addHero() method in hero.service.ts
  3. Coming from PHP MVC, addHero() method in model that will update the data in the database.

Hope you bear with me, I want to understand how it works before proceeding to the next step.

Thank you everyone.

src/app/heroes/heroes.component.ts (add) 

add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as Hero)
    .subscribe(hero => {
      this.heroes.push(hero);
    });
}

src/app/hero.service.ts (addHero)

/** POST: add a new hero to the server */
addHero(hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
    tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
    catchError(this.handleError<Hero>('addHero'))
  );
}
Dan Angelo Alcanar
  • 3
  • 2
  • You might want to read a little bit more on observable (aka reactive programming). Easiest way to understand it is to read a bit on `rxjs` Observable is like a `lazy` array with additional feature. It will only runs when you subscribe to it. – PKiong Aug 13 '21 at 02:56
  • https://rxviz.com/ Take a look at this, it might helps you to understand what is the `pipe` , `tap` and `subscribe` – PKiong Aug 13 '21 at 03:00
  • Angular guide gives an introduction to observables: https://angular.io/guide/observables-in-angular - I don't think anybody on Stack Overflow will write a *different* tutorial. It's definitely very different from the way you described (although there is a whole book on reactive programming in PHP) – Felix Aug 13 '21 at 03:39
  • Thanks guys! So to understand it I need to understand Observables first. Thank you for pointing me to the right direction. – Dan Angelo Alcanar Aug 13 '21 at 03:57

1 Answers1

0
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as Hero)
    .subscribe(hero => {
      this.heroes.push(hero);
    });
}```

Inside ts file, add function is called with name as param. The spaces on the sides are trimmed, again checked if there is a valid namestring. If not, it will not proceed. If there is one, a service will be called, with the name param passed and is subscribed. After subscription, if there is a response, the reponse will be pushed to this.heroes.

```addHero(hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
    tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
    catchError(this.handleError<Hero>('addHero'))
  );
}```

addHero service calls the api and pass the name which was sent from ts to the api and if there is a correct response, this.log() is called. If there is an error, it is caught.

For more info about tap and pipe, go through rxjs docs.
vsnikhilvs
  • 456
  • 1
  • 3
  • 10
  • Hi! Based on your explanation, can I say that the API(this.heroesUrl), has the add method/code inside it that adds the hero to a database/json object ? – Dan Angelo Alcanar Aug 13 '21 at 04:23
  • this.heroesUrl is the url or the backend endpoint we are trying to connect to. hero is the data we are sending. this.httpOptions is the options/headers we are sending, if needed – vsnikhilvs Aug 13 '21 at 04:26
  • Oh okay, I understand, yes. From what I understand, if this is used in a real life scenario, the url for example (/api/user/add), should contain the logic of adding the user to a database, is that right? and then that api should return a response to addUser service. – Dan Angelo Alcanar Aug 13 '21 at 04:43
  • Yeah, the controller behind that url in backend should contain the logic for DB connection and manipulation. – vsnikhilvs Aug 13 '21 at 14:11