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
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 >>
Ave que vuela, a la cazuela.