Creando nuestro propio servicio

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…

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;
    }
}

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

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

Ahorra tiempo…

ng generate service [name]

buenas clases

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();
    }

}

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

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

Injectable crea una instancia de nuestro servicio

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)

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

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

• Creación de carpeta “services”

• Creación del servicio LugaresService

• Injectable: Directiva que permite inyectar servicio en otros componentes

• Creación de funciones para obtener o buscar data

• Inclusión del servicio en el providers del app.module

• Importación del servicio en el componente a usar

Esto ya va teniendo forma en el proceso de un proyecto, desde los componentes, inyectables y la creación de propias directivas

Los services siempre se importan dentro de providers, hay algún tipo de service que no se declare.

Desde la terminal podemos crear el servicio, automáticamente crea los archivos y modifica lo necesario para que ya funcione, para crearlo junto con la carpeta services como en el video se escribe como sigue:

ng generate service services/lugares

el atributo @injectable() que es lo que hace? es que es como si creara un objeto estático o algo así raro