Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Clase 21 de 63 • Curso de Angular 6 2018

Resumen

Un servicio es una clase que puede ser inyectada en uno o varios componentes y que es muy útil para compartir datos o funciones entre éstos, evitando la duplicidad de código.

Se crean a través del Angular CLI con el siguiente comando:

ng generate service <directorio>/<nombre del servicio>

Al ejecutar este comando se generan en nuestro proyecto los siguientes archivos:

/<directorio>
  <nombre del servicio>.service.spec.ts
  <nombre del servicio>.service.ts

Luego en el componente, inyectamos el Servicio de manera similar a cómo inyectamos el ActivatedRoute.

Enzo Aliatis

student•

Talvez quedaría mejor si en el mismo servicio creo una función que me devuelva el friend que necesito

En el servicio:

getAFriend(uuid) {
    return this.friends.find(item => item.uuid == uuid);}

En conversation component

export class ConversationComponent implements OnInit {
  friendId: any;
  friend: User;

  constructor(
    private activatedRoute: ActivatedRoute,
    private userServices: UserService
  ) {
    this.friendId = this.activatedRoute.snapshot.params["uuid"];
    this.friend = this.userServices.getAFriend(this.friendId);
  }

  ngOnInit() {}
}

Otmaira Buitrago

student•

gracias.

Nicole Venachi Pizo

student•

A mí me tocó declarar friend de tipo any (friend:any). Por que si no me salía el siguiente error: (property) VerClienteComponent.friend: User Type 'User | undefined' is not assignable to type 'User'. Type 'undefined' is not assignable to type 'User'.

En el servicio al pasar el "uid" en la función debí declarar que era de tipo any de la siguiente forma: getAFriend(uid:any){ ... } No entiendo muy bien el error, pero lo coloco por si alguien más le sucede lo mismo

Leonel Rojas

student•

Les dejo una versión mas corta de realizar esta búsqueda, aprovechando los arrow funtions, ya que cuando se recibe 1 solo parámetro nos podemos evitar los parentesis, y si es una sola línea de código nos ahorramos el “return”

this.friend = this.friends.find(record => record.uid == this.friendId);

Juan Roberto Paz Ramos

student•

Buen aporte, gracias

Carlos Enrique Ramírez Flores

student•

La palabra **Predicate ** me dio error y tuve que quitarla para que corriera sin errores.

this.friend =  this.friends.find((record)=>{
      return record.uid ==  this.friendId;
    })```

Daniel García

company_admin•

realmente fue el IDE de Eduardo quien puso ese placeholder “predicate” como un tipo de ayuda visual, la palabra no forma parte del código.

Luis Batalla

student•

gracias! me pasò lo mismo y ahora veo tu mensaje, yo uso visual code debe ser x eso.
Slds,

Jeison Sneider Ruiz Zemanate

student•

conversation.component.ts ---->

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {User} from '../interfaces/user';
import {UserService} from '../services/user.service';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  friends: User[];
  friend: User;
  constructor(private activatedRoute: ActivatedRoute, private userService: UserService) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);

    this.friends = this.userService.getFriends();

    this.friend = this.friends.find((record) =>{
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }

  ngOnInit() {
  }

}

user.service.ts ----->

import { Injectable } from '@angular/core';
import {User} from '../interfaces/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  friends: User[];
  constructor() {
    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 2
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 3
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 4
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 5
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];

  }

  getFriends() {
    return this.friends;
  }
}

home.component.ts ---->

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  friends: User[];
  constructor(private userService: UserService) {
    this.friends = userService.getFriends();

  }

  ngOnInit() {
  }

}

Mario Alejandro Cortez Salinas

student•

Durante el curso de angular 4 ademas de importar el servicio en el component donde se va a usar este se agregaba a app.module.ts en la sección de providers ¿Que ventaja nos brinda eso?
Ya que como se ve en esta clase podemos hacer uso sin hacer la declaración en app.module.ts

moises mannarino

student•

si se agrega automaticamente en providers, l oque pasa que como crea el servicio con angular cli no se muestra q se agrega automaticamente ahi, pero se agrega

Mario Alejandro Cortez Salinas

student•

Woow muchas gracias

Alex Eugenio Gavidia Donayre

student•

ng generate service services/user

Daniel Gonzalez Blanco

student•

Alguien sabe porque al inyectar el servicio en el componente dentro del constructor se define como privado. ¿Siempre es asi?

Julian Rodriguez

student•

Se define privado porque es dentro del contexto del componente, es mas que todo seguridad,Si es publico donde tenga inyectado(referenciado) el componente se puede llamar.

Usuario anónimo

user•

Si para que otros no puedan alterarlo. Reglas de seguridad.

Alfonso Adame Rueda

student•

hola compañeros lo volví a ejecutar y ya me dio, aunque no se por que pasa esto.

Diego Forero

Team Platzi•

Es probable que tuvieras cache en el navegador y por esto fallaba.

Alfonso Adame Rueda

student•

gracias a todos por responder

Carlos Castro

student•

Esperaba que hubiera otra forma aparte de _servicios _y _clonar _datos entre componentes. Me refiero al uso de algún manejador del "estado" de la app, estilo Redux. Seguiré viendo el curso esperando ver una explicación sobre esta área, que es uno de los mayores retos que me enfrento al usar angular en aplicaciones grandes/complejas :D

Mauricio Fajardo

student•

Redux we puede usar en angular

Mario Alejandro Macias Ortiz

student•

Enzo dijo lo que yo pense jajaja se tenia que decir y se dijo

Christian Edward Barrios Rodriguez

student•

forma rápida de crear servicios:

ng g s services/user

Juan C Felizzola

student•

Para crear el primer servicio no hay necesidad de crear la carpeta antes.
Con solo:

ng g s services/user

Generamos tanto la carpeta, como el servicio.

Carlos Fabian Hernandez Pacheco

student•

tengo este error ayuda porfavor…

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'find' of undefined
TypeError: Cannot read property 'find' of undefined```

Víctor Rueda

student•

Faltaría importar la interfaz de User en el user.service.ts para que sea válida la declaración de friends: User[];

Alex Eugenio Gavidia Donayre

student•

Excelente

Carlos Uriel de Jesus Sánchez González

student•

conversation.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {UserService} from '../services/user.service';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
  friendId: number;
  friends: User[];
  friend: User;
  constructor(private activatedRoute: ActivatedRoute, private userService: UserService) {
    this.friendId = parseInt(this.activatedRoute.snapshot.params['uid'], 10);
    console.log(this.friendId);
    this.friends = userService.getFriends();
    this.friend = this.friends.find( record => record.uid === this.friendId);
    console.log(this.friend);
  }

  ngOnInit() {
  }

}

Meliza villafuerte rayme

student•

¿Como crear una "ventana modal" o "cuadro de dialogo" en Angular 6?

Fernanda Aragon

student•

Hola, puedes ver este tutorial de Angular Material para que puedas crear un Dialog o Modal en tu Web App https://medium.com/codingthesmartway-com-blog/angular-material-part-2-popups-modals-1ed0c2405f18

Alfonso Adame Rueda

student•

Joseba Fuentes

student•

Con el mismo codigo me funciona correcto, pero me aparece en conversations WDS Disconnected! alguna idea?

Alfonso Adame Rueda

student•

hola buenas tardes me sale este error en el console.log ERROR in src/app/conversation/conversation.component.ts(58,13): error TS2339: Property 'log' does not exist on type '{ new (): Console; prototype: Console; }'.

Diego Forero

Team Platzi•

es console.log(this.friend) estas escribiendo Console.log

Alfonso Adame Rueda

student•

muchas gracias GOLLUM23 por responder ,es un error de novato,me gusta esto de platzi, que te responden tus dudas, me hacen sentir que no estoy estudiando solo , muchas gracias.

export class ConversationComponent implements OnInit {
  friendId: any;
  friend: User;

  constructor(
    private activatedRoute: ActivatedRoute,
    private userServices: UserService
  ) {
    this.friendId = this.activatedRoute.snapshot.params["uuid"];
    this.friend = this.userServices.getAFriend(this.friendId);
  }

  ngOnInit() {}
}

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {User} from '../interfaces/user';
import {UserService} from '../services/user.service';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  friends: User[];
  friend: User;
  constructor(private activatedRoute: ActivatedRoute, private userService: UserService) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);

    this.friends = this.userService.getFriends();

    this.friend = this.friends.find((record) =>{
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }

  ngOnInit() {
  }

}

import { Injectable } from '@angular/core';
import {User} from '../interfaces/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  friends: User[];
  constructor() {
    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 2
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 3
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 4
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 5
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];

  }

  getFriends() {
    return this.friends;
  }
}

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  friends: User[];
  constructor(private userService: UserService) {
    this.friends = userService.getFriends();

  }

  ngOnInit() {
  }

}

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {UserService} from '../services/user.service';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
  friendId: number;
  friends: User[];
  friend: User;
  constructor(private activatedRoute: ActivatedRoute, private userService: UserService) {
    this.friendId = parseInt(this.activatedRoute.snapshot.params['uid'], 10);
    console.log(this.friendId);
    this.friends = userService.getFriends();
    this.friend = this.friends.find( record => record.uid === this.friendId);
    console.log(this.friend);
  }

  ngOnInit() {
  }

}

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos