Angular 2 - 10) Crear un servicio con métodos observables usando Http

Objetivo:

• Crear un nuevo servicio
• Utilizar Http

1. Levantar el servidor utilizando json-server como se mostro en el práctico anterior.
2. Dentro de la carpeta shared crear una carpeta llamada services.
3. Crear un nuevo archivo llamado user.service.ts y actualizar con la siguiente información:

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs';

const SERVER_REST_API_URL = "http://localhost:3000/users/";

@Injectable()

export class UserService {

private http: Http;

constructor(http:Http) {

  this.http = http;

}

getUsers() {

  return this.http.get(SERVER_REST_API_URL)

      .map(res => res.json());

}

}

4. Abrir el archivo users.component.ts para utilizar la información proveniente desde el servidor:

import { Component, OnInit } from '@angular/core';

import { User } from '../shared/models/user';

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

@Component({

selector: 'app-users',

templateUrl: './users.component.html',

styleUrls: ['./users.component.css']

})

export class UsersComponent implements OnInit {

message:string;

users: Array<User>;

activeUser;

userService:UserService;

constructor(userService: UserService) {

  this.userService = userService;

 }

ngOnInit() {

  this.users = [];

  this.userService.getUsers()

      .subscribe((resp) => {

        for(let u of resp) {

          this.users.push(new User(u.id, u.name, u.username));

        }

    });

}

selectUser(user) {

  this.activeUser = user;

}

onUserCreated(event) {

  this.users.push(event.user);

}

}

5. Ejecutar en una consola el ng serve y vemos la misma informacion pero proveniente del servidor local.

Repositorio en GitHub