Creando nuestro propio servicio

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Creando nuestro propio servicio

Resumen

Vamos a agregar un servicio para reutilizar la lista de lugares desde diferentes componentes de la aplicación.

Comentarios

Jordano Uribe Leon

student

Comando para generar un service por consola

Deben crear la carpeta y dentro de la carpeta ejecutar el comando, creara los archivos y hará las importaciones necesarias

ng g service [y el nombre]

Camilo Andres Dulce

student

tambien se puede crear indicando la carpeta asi:
ng g s [carpeta]/[nombre]
para el de lugares quedaria:
ng g s services/lugares

Juan Roa

student

Generate Service

Andres Gallardo

student

Me parece mejor practica utilizar el metodo getLugares en vez de la propiedad de lugares.

public getLugar(id) {
    return this.getLugares().find((lugar) => {
      return lugar.id == id || null
    })
  }```

Gleycer Parra

student

¿Cómo configuro PhpStorm para que me importe automáticamente las dependencias, módulos, servicios? Tengo la versión 2017.2.4

Diego Forero

Team Platzi

Revisa que tengas instalado el plugin AngularJS, es el plugin para integrar angular en el editor.

Alejandra Guadalupe Larrañaga Altamirano

student

no tienes que hacer nada, se hace automaticamente, no necesitas ningun plugin.

Nelson Celis

company_admin

Hola!
Cuando cree el servicio lugares.service.ts por alguna extraña razón me tiraba error de que no encontraba el archivo, revise código y nada raro o mal direccionado… terminé cerrando y ejecutando denuevo ng serve y dejo de tirar el error…

muy raro…

Daniel Altamar

student

¿porque se crea la variable lugares = null;? esta en el minuto 3:31? Saludos,

Diego Forero

Team Platzi

Esta creando la variable con un valor por defecto como null, se pudo definir también con lugares = '',

Diego Mendoza

student

Parece que es un vídeo posterior a la variable que crea.
Esa variable la crea más adelante.

Antony Dixon Albites Tapia

student

Tengo así el archivo lugares.service.ts , me salía error si lo hacía como la clase.

import {Injectable} from "@angular/core";
@Injectable({
    providedIn: 'root',
  })
export class LugaresService{
    lugares:any = [
        {id: 1, plan: 'pagado', cercania: 1, distancia: 1, active: true, nombre:'Florería la Gardenia',description:'Esta es una descripcion'},
        {id: 2, plan: 'gratuito', cercania: 1, distancia: 1.8, active: true, nombre:'Donas la pasadita',description:'Esta es una descripcion'},
        {id: 3, plan: 'gratuito', cercania: 2, distancia: 5, active: true, nombre:'Veterinaria Huellitas Felices',description:'Esta es una descripcion'},
        {id: 4, plan: 'gratuito', cercania: 3, distancia: 10, active: false, nombre:'Sushi Suhiroll',description:'Esta es una descripcion'},
        {id: 5, plan: 'pagado', cercania: 3, distancia: 35, active: true, nombre:'Hotel la Gracia',description:'Esta es una descripcion'},
        {id: 6, plan: 'gratuito', cercania: 3, distancia: 120, active: false, nombre:'Zapatería el Clavo',description:'Esta es una descripcion'},
    ];
    public getLugares(){
        return this.lugares;
    }
    public buscarLugar(id){
        return this.lugares.filter((lugar) => { return lugar.id == id})[0] || null;
    }
}

Juan Carlos Barcinilla Alarcon

student

Excelente manera para crear servicios en angular y utilizarlo en cualquier parte del componente.

DIEGO ALEXANDER CASTELLANOS SANTAMARIA

student

prefiero mejor crear el servicio con el comando ng g service nombreservicio , luego asi ya queda listo para trabajar.

Miguel Lopez Ariza

student

En el Array de objetos, del ejemplo falto la descripción.

Jhon Castrillon

student

Ahorra tiempo…

ng generate service [name]

Cristian Palta

student

buenas clases

Carlos Uriel de Jesus Sánchez González

student

@Injectable()
exports class LugaresService{

}

Diego Vallejo

student

la variable lugares del lugares.components.ts debe ser tipo array, si no me daba error

export class LugaresComponentesComponent {

    title = 'platziScuare';
    lat = 0.826350;
    lng = -77.638744;
    lugares = [];
    /*PARA EL SERVICIO CREAMOS UNA VARIABLE PRIVADA*/
    constructor(private lugaresServicesService: LugaresServicesService) {
        this.lugares = lugaresServicesService.getLugares();
    }

}

Usuario anónimo

user

Servicios en Angular es muy sencillo y fácil de aprender gracias a este curso.

Rodolfo Sáenz

student

Me encanta esto que el IDE te dice que tienes un error y que auto completa, etc… eso ayuda mucho, tal como hacen los IDE de Java. Cosa que faltaba en el desarrollo de Javascript

Alberto Campos Hernandez

student

Injectable crea una instancia de nuestro servicio

ABRAHAN CHOQUENAIRA TTITO

student

Si funciona el video solo tienen que verificar en el FireBase al costado de database aparece una lista desplegable para seleccionar si usas Cloud Firestore o RealTime Database, por defecto esta con Cloud Firestore(https://www.dropbox.com/s/e2vdpzfkyzubct9/Firebase.PNG?dl=0)

ABRAHAN CHOQUENAIRA TTITO

student

Diego Fernández Cruz

student

Sin el decorador @Injectable también funciona. Por qué ? Ayuda.

Felipe Vidal

student

¿Porqué cuando creo un servicio aparece en rojo aún declarandolo en app.module.ts? alguien sabe? xd

Diego Forero

Team Platzi

Hola, puedes compartir una captura de pantalla para tener más contexto de lo que te pasa y ayudarte.

import {Injectable} from "@angular/core";
@Injectable({
    providedIn: 'root',
  })
export class LugaresService{
    lugares:any = [
        {id: 1, plan: 'pagado', cercania: 1, distancia: 1, active: true, nombre:'Florería la Gardenia',description:'Esta es una descripcion'},
        {id: 2, plan: 'gratuito', cercania: 1, distancia: 1.8, active: true, nombre:'Donas la pasadita',description:'Esta es una descripcion'},
        {id: 3, plan: 'gratuito', cercania: 2, distancia: 5, active: true, nombre:'Veterinaria Huellitas Felices',description:'Esta es una descripcion'},
        {id: 4, plan: 'gratuito', cercania: 3, distancia: 10, active: false, nombre:'Sushi Suhiroll',description:'Esta es una descripcion'},
        {id: 5, plan: 'pagado', cercania: 3, distancia: 35, active: true, nombre:'Hotel la Gracia',description:'Esta es una descripcion'},
        {id: 6, plan: 'gratuito', cercania: 3, distancia: 120, active: false, nombre:'Zapatería el Clavo',description:'Esta es una descripcion'},
    ];
    public getLugares(){
        return this.lugares;
    }
    public buscarLugar(id){
        return this.lugares.filter((lugar) => { return lugar.id == id})[0] || null;
    }
}

export class LugaresComponentesComponent {

    title = 'platziScuare';
    lat = 0.826350;
    lng = -77.638744;
    lugares = [];
    /*PARA EL SERVICIO CREAMOS UNA VARIABLE PRIVADA*/
    constructor(private lugaresServicesService: LugaresServicesService) {
        this.lugares = lugaresServicesService.getLugares();
    }

}

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos