Basado en la documentación oficial de angularfire.
En Windows:
- Vaya a la carpeta donde creará el proyecto.
- Presione
shift + clic derecho
- Seleccione
Abrir la ventana de PowerShell aquí
npm install -g @angular/cli
ng new <nombre-del-proyecto>
cd <nombre del proyecto>
En cuanto a estilos prefiero utilizar SCSS; es similar a CSS pero con más opciones. 👌🏻
El nuevo comando de Angular CLI para agregar estos paquetes.
ng add @angular/fire
El nuevo comando de Angular CLI para agregar estos paquetes.
npm i jquery bootstrap @popperjs/core --save
Antes:
...
"styles": [
"src/styles.scss"
],
"scripts": []
...
Después:
...
"styles": [
"src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.slim.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js"
]
...
Dentro de src/environments/environments.ts
:
Antes:
...
export const environment = {
production: false
};
...
Después:
...
export const environment = {
production: false,
config: {
apiKey: '...',
authDomain: '...',
databaseURL: '...',
projectId: '...',
storageBucket: '...',
messagingSenderId: '...',
appId: '...',
}
};
...
Sustitúyela con tu propia información desde la Consola de firebase.
Open /src/app/app.module.ts
, inyecta los proveedores de Firebase, y especifica tu configuración de Firebase.
Antes:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Después:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.config),
AngularFireAnalyticsModule,
AngularFirestoreModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
TypeScript - En el componente: /src/app/app.component.ts
:
Antes:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
title: 'nombre-de-la-app'
}
Después:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
items: Observable<any[]>;
constructor(db: AngularFirestore) {
this.items = db.collection('items').valueChanges();
}
}
HTML - En el componente /src/app/app.component.html
:
<ul>
<li class="text" *ngFor="let item of items | async">
{{item.name}}
</li>
</ul>
También puedes descargar esta plantilla HTML con Bootstrap para que se vea mejor tu proyecto.
ng serve