В этом руководстве объясняется, как добавлять данные в базу данных firebase и получать данные из базы данных firebase. Есть некоторые предварительные условия, которые вы должны выполнить, чтобы выполнить это руководство. Вы можете скачать исходный шнур здесь

Если вы уже установили node.js, ничего страшного. убедитесь, что это версия 7.5.0 или выше. Если у вас не установлен node.js, щелкните здесь, чтобы загрузить последнюю версию node.js. вы также можете проверить свою текущую версию node.js, набрав команду ниже

Если у вас установлены ionic и Cordova, все в порядке. убедитесь, что версия ionic - 3.20.0 или выше, а версия Cordova - 8.0.0 или выше. вы также можете проверить свою текущую версию ionic и Cordova, набрав команду ниже

ионная версия

Кордовская версия

Если вы не установили ionic и Cordova, используйте команду ниже для установки с помощью CMD

npm install -g cordova ionic

вам необходимо создать учетную запись firebase, чтобы использовать аутентификацию firebase. Это очень простая задача. Щелкните здесь, чтобы создать учетную запись firebase.

Прежде всего, вы должны создать ионный проект и перейти в существующую папку проекта. При желании вы можете запустить проект вначале, используя следующие команды.

ionic start ionic-dataAdd&Retrive blank cd ionic-dataAdd&Retrive ionic lab

Затем установите firebase 2 в проект

npm install firebase angularfire2 --save

Затем вам нужно настроить firebase, добавив фрагмент кода в firebase. Перейдите в firebase и нажмите добавить firebase в свое веб-приложение. Затем появится диалоговое окно, как показано ниже.

скопируйте этот код и вставьте этот код в app.module.ts над объявлениями

Затем вам нужно импортировать некоторые библиотеки angular fire

import {AngularFireModule} from 'angularfire2'; import {AngularFireAuthModule} from 'angularfire2/auth'; import {AngularFireDatabaseModule} from 'angularfire2/database-deprecated';

включить эти 3 в импорт как

imports: [ AngularFireModule.initializeApp(config), AngularFireAuthModule, AngularFireDatabaseModule, ]

Затем мы должны разработать домашнюю страницу. Для этого я всего лишь добавляю текстовое поле и кнопку для добавления данных в базу данных.

HTML-код на главную страницу

Затем нам нужно реализовать файл home.ts

Прежде всего мы должны реализовать добавление данных в базу данных. Для этого используйте следующий метод

addData(){ this.reference=firebase.database().ref('/example') this.reference.push({ example:this.mytext }) console.log("data added"); }

В файле home.ts есть 2 способа получить данные из firebase.

this.exe=db.list('/example');

перед этим мы должны объявить «переменную exe» как

exe:FirebaseListObservable;

Вы можете увидеть полный код home.ts ниже

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {AngularFireAuth} from 'angularfire2/auth'; import firebase from 'firebase' import {AngularFireDatabase,FirebaseListObservable} from 'angularfire2/database-deprecated'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { reference:any; mytext:any; test:Array=[]; exe:FirebaseListObservable; constructor( public navCtrl: NavController, private fire:AngularFireAuth,public db:AngularFireDatabase) { this.exe=db.list('/example'); } addData(){ this.reference=firebase.database().ref('/example') this.reference.push({ example:this.mytext }) console.log("data added"); } getdata(){ this.reference=firebase.database().ref('/example') this.db.list(this.reference).subscribe(suject=>{ this.test=suject; console.log("subject"+suject); }); } }

Разработчик полного стека в Eyepax IT consulting

Первоначально опубликовано на сайте https://simpleactivity435203168.wordpress.com 15 июня 2018 г.