Ahora estamos listos para empezar a construir porque ya estamos conectados a la base de fuego y la mayor parte de la configuración está hecha.
Lo primero que queremos hacer es añadir un botón, para que nuestros usuarios puedan crear nuevas facturas dentro de su aplicación. Ve a src0/pages/home/home.html. Debería verse así:

1234567891011<cabeza de iones htmlNo hay nada raro aquí; es sólo el html básico. Cambia el título de la página y añade un botón de la barra de navegación que te envía a una nueva página para crear facturas:
12345678910111213141516<ion-header ión-iconname="add"/ión-iconocido="add"/button,/botón-ion-buttons,/ion-navbar,/ion-header,html
Eso te dará un bonito signo + a la derecha de tu barra de navegación. Una vez que el usuario hace clic en el signo, se llama a la nueva funciónBill().
Ahora necesitamos crear newBill() en el archivo home.ts. Para ello, abre el archivo, que tendrá el siguiente código de marcador de posición:
12345678910importar{Componente}de$0027@angular/núcleo$0027;importar{Controlador Naval}de$0027ionic-angular$0027;@Componente({ selector:$0027page-home$0027, templateUrl:$0027home.html$0027})exportclassHomePage{constructor(public navCtrl:NavController){}}javascript
Vamos a enviar al usuario a una nueva página para crear esta factura, así que tendremos que usar el NavController para enviar a nuestro usuario allí.
Primero, sin embargo, vamos a crear la página BillCreate para ver lo más genial de Ionic : su CLI. Puedes hacer un montón de cosas geniales con él, incluso generar código de marcador de posición. Sólo tienes que abrir tu terminal y escribir:
página g iónica BillCreate
Esa pequeña línea de código de ahí crea una carpeta de bill-create, con 4 archivos en ella bill-create.ts bill-create.html bill-create.scss bill-create.module.ts y todos tienen el código de la plantilla ya ahí.
¡Habla de un aumento de la productividad!
Abriremos esos archivos más tarde, por ahora sólo necesitamos crearlos para evitar errores al crear la nueva funciónBill().
Vuelve a home.ts y justo después del constructor() crea la nueva función:
123newBill(){this.navCtrl.push($0027BillCreatePage$0027);}javascript
Esto sólo llevará a nuestro usuario a la página recién creada donde añadiremos el formulario para crear una nueva factura.
Así que ve a pages/bill-create/bill-create.html y borra todo lo que hay ahí, lo reemplazaremos con esto:
123456789101112131415161718192021222324252627<cabeza de ión ión-contenido de la etiqueta de la factura [(ngModel)]="name "type="text "placeholder="¿Cómo se identifica esta factura? "Amount</ion-input[(ngModel)]="amount "type="number "placeholder="¿Cuánto tendrá que pagar? "due date</ion-input"/ion-item;tico="D MMM, YY "pickerFormat="DD MMM YYYY"[(ngModel)]="due date"="due date buttonblock(click)="createBill(name, amount, dueDate)"> Create Bill </ion-datetime htmlLos dos primeros elementos creados son sólo entradas regulares; puedes ver todo sobre ellos en los documentos iónicos. Sólo añadimos un [(ngModel)] a ellos para mantener los valores.
El tercer elemento es un elemento de fecha y hora, por eso Ionic es tan impresionante, si añades esa entrada, añadirá un selector de fechas de bonito diseño a tu aplicación.
Y finalmente añadimos un botón que llama al método createBill() pasando los valores de las entradas.
Ahora tenemos que ir a bill-create.ts y crear esa función. Abre el archivo y verás esto:
1234567891011importar{Componente}de$0027@angular/núcleo$0027;importar{PáginaIónica,NavController}de$0027ionic-angular$0027;@PáginaIónica()@Componente({ selector:$0027page-bill-create$0027, plantillaUrl:$0027bill-create.html$0027})exportarclaseBillCreatePage{constructor(public navCtrl:NavController){}}javascript
Necesitaremos importar AngularFire y nuestra lista observable a este archivo, así que justo debajo de su último tipo de declaración de importación:
importar { AngularFireDatabase, AngularFireList } de $0027angularfire2/database$0027;
- AngularFireDatabase nos da la magia de AngularFire2, donde podemos llamar listas, objetos, métodos de autentificación, etc.
- AngularFireList nos da el observable que usaremos, se suscribirá a la lista y lo sincronizará en tiempo real con nuestra aplicación.
Justo antes del constructor, crea una variable que contenga nuestra lista. Si te confundes sobre dónde hacer esto no te preocupes, te mostraré el archivo completo más tarde.
BillList: AngularFireList;
Inyecta AngularFireDatabase en tu constructor.
1234constructor(public navCtrl:NavController,public afDatabase:AngularFireDatabase){}
javascript
Ahora crea un enlace con la lista dentro del constructor:
this.billList = afDatabase.list($0027/bills$0027);
Esto mantendrá la lista de facturas sincronizada con nuestra base de datos en tiempo real de la Base de Fuego en el nodo de facturas.
Para añadir nuevos billetes a esa lista, sólo tenemos que usar el método push() de Angularfire:
123456789101112131415createBill(nombre, cantidad, fecha de vencimiento){const newBillRef =this.billList.push({}); newBillRef. set({nombre: nombre, importe: importe, dueDate: dueDate, paid:false, id: newBillRef.key}).then(newBill={\b},{this.navCtrl.pop();},error={b};{console.log(error);});}
javascript
- this.billList.push() está agregando un nuevo proyecto de ley a la lista, pasando los valores que el método está recibiendo, y estableciendo la propiedad pagada a false.
- La función .then() ocurre después de que el proyecto de ley se añade a la lista y hace 2 cosas: Primero vuelve una página (a la página de inicio) después de crear el proyecto de ley. Segundo, si ocurre algún error en el proceso lo va a registrar en la consola.
La versión final del archivo debería verse así:
12345678910111213141516171819202122232425262728293031323334importar{Componente}de$0027@angular/núcleo$0027;importar{PáginaIónica,Controlador Nav}de$0027ionic-angular$0027;importar{Base de datos de fuego angular,AngularFireList}de$0027angularfire2/base de datos$0027;@PáginaIónica()@Componente({ selector: "page-bill-create", templateUrl: "bill-create". html$0027})exportclassBillCreatePage{ billList:AngularFireList<any;};constructor(public navCtrl:NavController,public afDatabase:AngularFireDatabase){this.billList= afDatabase.list($0027/bills$0027);}createBill(nombre, cantidad, fecha de vencimiento){const newBillRef =esto. billList.push({}); newBillRef.set({nombre: nombre, importe: importe, dueDate: dueDate, paid:false, id: newBillRef.key}).then(newBill={[{this.navCtrl.pop();},error={{console.log(error);});}}
javascript
home.ts
¡Grandioso! Podemos crear billetes ahora. ¿Es todo para esta aplicación?
No, ahora vamos a listar esos billetes en la página de inicio. Para ello, abre home.ts, importa AngularFireDatabase, inyéctalo en el controlador y encuéntralo en una lista:
12345678910111213141516171819202122importar{Componente}de$0027@angular/núcleo$0027;importar{Controlador Naval}de$0027ionic-angular$0027;importar{Base de datos de AngularFire,AngularFireList}de$0027angularfire2/base de datos$0027;@Componente({ templateUrl:$0027home. html$0027,})exportclassHomePage{ billList:AngularFireList<any;};;constructor(public navCtrl:NavController,public afDatabase:AngularFireDatabase){this.billList= afDatabase.list($0027/bills$0027).valueChanges();}newBill(){this.navCtrl.push($0027BillCreatePage$0027);}}
javascript
Vamos a ir a home.html y crear un par de tarjetas para mostrar tanto las facturas pagadas como las no pagadas . Sin embargo, como quiero formatear la fecha de vencimiento, voy a necesitar un poco de ayuda.
Verás, los tubos Angular2 ( que es lo que usamos para dar formato a las fechas ) se rompen cuando usamos Ionic para construir aplicaciones para móviles. Vamos a usar un tubo personalizado de angular2-moment en su lugar.
Abra su terminal y escriba:
1npminstall -- salva angular2-moment
bash
Esto instalará tanto el módulo como su escritura, puedes leer los documentos aquí pero sólo usaremos una pequeña parte de él.
Importa la tubería que necesitaremos:
importar { DateFormatPipe } de $0027angular2-moment$0027;
Ahora dentro de nuestra declaración de @Componente necesitamos expresar que usaremos ese tubo:
12345@Componente({ templateUrl:$0027build/pages/home/home.html$0027, selector:$0027app$0027, tuberías:[DateFormatPipe]})
javascript
¡Y eso es todo! Ve al archivo home.html para usar nuestra aplicación. Sólo tienes que abrir el archivo y, dentro del contenido de los iones, crear una tarjeta para guardar nuestras facturas impagadas :
123456789101112131415<tarjeta-ión |cabeza de la tarjeta-ión; facturas pendientes $0027LL$0027}}</strong----p--debido a que el artículo de la ley de la deuda es de un tipo de pago. htmlHay algunas cosas que están pasando aquí:
- *ngFor="let bill of billList | async" le dice a nuestro artículo que repita por cada factura que encuentre en nuestra billList.
- (click)="promptPayment(bill.id)" le dice a nuestro sistema que llame a esa función cuando los usuarios toquen el artículo. (crearemos esa función en un minuto).
- [class.hide]="bill.paid == true" dice que si la factura ya está pagada, añade la clase css hide, que ocultará el artículo de la lista.
Y después de eso estamos creando un artículo regular y vinculando las propiedades del proyecto de ley a él.
Mira esta línea
Paga antes: {{bill.dueDate | amDateFormat: $0027LL$0027}}
aquí es donde estamos usando Angular2-moment para formatear la fecha.Justo después de esa tarjeta crearemos otra tarjeta, esta vez para tener la lista de las facturas que nuestro usuario ya ha pagado:
1234567891011121314<tarjeta de iones ||cabeza de tarjeta de iones; facturas pagadas ||cabeza de tarjeta de iones ||lista de iones*ngFor="let bill of billList | async"[class.hide]="bill. paid == false"<ion-iconname="checkmark-circle "favoriteitem-left nombre}}</h2;h3;Total: ${{{{{bill.amount}}}</h3;};/ion-item;};
html
Es casi igual que antes, sólo que estamos añadiendo la clase de piel a las que aún no han sido pagadas.
promptPayment()
¿Recuerdas cuando dijimos que crearíamos la función promptPayment() en un minuto? Ahora es ese momento. Ve a home.ts e importa el AlertController; lo necesitaremos para crear un prompt:
importar { NavController, AlertController } desde $0027ionic-angular$0027;
Ahora sólo tenemos que crear la función:
1234567891011121314151617promptPayment(billId: string){let alert =this.alertCtrl.create({ message: "Mark as paid?", buttons:[{ text:$0027Cancel$0027,},{ text:$0027Mark as Paid$0027,handler:data= > {this.billList.update(billId,{ paid:true});}}]}); alert.present();}
javascript
El código es muy fácil de seguir. Estamos creando un aviso que va a preguntar al usuario: ¿Marcar como pagado? y nuestro usuario va a recibir 2 botones:
- Cancelar, lo que no hace nada.
- Marque como pagado, que llamará a esto.billList.update(billId, {pago: true });. Este método tomará el billId que estamos enviando desde el html y actualizará ese bill con el método update() de AngularFire.
¡Es pan comido!
Contenidos