05 4

Agregar servicios y componentes con Firebase y Angular [05]

En este tutorial vamos a agregar servicios y componentes con Firebase y Angular siguiendo estos pasos:

  • Agregar librer√≠as de bootstrap.
  • Crear un componente.
  • Crear un servicio.
  • Llamar firestore (base de datos) a nuestro servicio.

Comandos:
Crear componentes: ng g c components/lista
Crear servicio: ng g s services/con

Agregar servicios y componentes con Firebase y Angular

Codigo en git: https://github.com/programadornovato/ngFirebase/commit/d27a57286ab74517f57924c217fd56f77f3688bc

src/app/app.component.html

<!-- <ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul> -->
<app-lista></app-lista>

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { ListaComponent } from './components/lista/lista.component';
import { AgregaComponent } from './components/agrega/agrega.component';
@NgModule({
  declarations: [
    AppComponent,
    ListaComponent,
    AgregaComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/components/agrega/agrega.component.html

<p>agrega works!</p>

src/app/components/agrega/agrega.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

src/app/components/lista/lista.component.html

<p>lista works!</p>

src/app/components/lista/lista.component.ts

import { Component, OnInit } from '@angular/core';
import {ConService} from '../../services/con.service'
@Component({
  selector: 'app-lista',
  templateUrl: './lista.component.html',
  styleUrls: ['./lista.component.css']
})
export class ListaComponent implements OnInit {
  items:any;

  constructor(private con:ConService) {
    this.con.retornaItems().subscribe(items=>{
      this.items=items;
      console.log(this.items);
    })
  }

  ngOnInit(): void {
  }

}

ūüĒóPuging de angular: https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
ūüĒó Documentacion de angularfire: https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md
ūüé¶[Curso] Bootstrap de 0 a 100 ūüĆą: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT
ūüé¶[Curso] FirebaseūüĒ•de 0 a 100: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQqPh6eKk7_Q-ugWyhO6SKT
ūüé¶[Curso] Angular js ūüĒļ[De 0 a 100]: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRbxrnw-tAq6tG-NIUNu9sG
ūüé¶[Curso] SASS de 0 a 100 ūüĆą: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQXywJB8KMN_-GccZuVf9ag
ūüé¶[Curso] LESS de 0 a 100 ūüĆą: https://www.youtube.com/playlist?list=PLCTD_CpMeEKT70itw70uVs0vlFbvbCPQN

ūüĒó Pagina de angular: https://cli.angular.io/
ūüĒó Pagina de nodejs: https://nodejs.org/en/
ūüĒó Pagina de typescrip: https://www.typescriptlang.org/
ūüĒó Pagina oficial: https://www.programadornovato.com

ūüĒó Facebook: https://facebook.com/ProgramadorNovatoOficial
ūüĒó Twitter: https://twitter.com/programadornova
ūüĒó Linkedin: https://www.linkedin.com/in/programadornovato/
ūüĒó Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable:¬†Eugenio Chaparro.
  • Finalidad:¬† Moderar los comentarios.
  • Legitimaci√≥n:¬† Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:¬† No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a digitalocean.com que act√ļa como encargado de tratamiento.
  • Derechos:¬†Acceder, rectificar y suprimir los datos.
  • Informaci√≥n Adicional:¬†Puede consultar la informaci√≥n detallada en la Pol√≠tica de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad
Salir de la versión móvil