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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)