[Curso] Proyecto con Firebase y Angular馃敟

05.- Proyecto con Firebase y Angular [Agregar servicios y componentes]馃敟

En este tutorial vamos a hacer los siguientes puntos:

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

Eugenio Chaparro

Entradas recientes

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

En este tutorial vamos editar el c贸digo de nuestro m贸dulo personas para poder personalizar algunas…

2 meses hace
馃煝Crear un sub_m贸dulo en Dolibarr [03]

馃煝Crear un sub_m贸dulo en Dolibarr [03]

En este tutorial vamos a crear un sub m贸dulo llamado seguridad que ser谩 muy parecido…

2 meses hace
馃煝Modificar un m贸dulo en Dolibarr [02]

馃煝Modificar un m贸dulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
馃煝Constructor de m贸dulos en Dolibarr

馃煝Constructor de m贸dulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una pol铆tica clara:…

2 meses hace
馃煝Tickets en Dolibarr [19]

馃煝Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
馃煝Agenda en Dolibarr [18]

馃煝Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace