在本指南中，我将引导您使用 Ionic 2 和 Google 的 Firebase 实时数据库创建数据服务。
创建项目
首先确保 Ionic CLI（命令行实用程序）已安装并且是最新的。
$ npm install -g ionic@beta
$ npm install -g cordova
接下来，让我们生成项目。我们将制作一个简单的待办事项列表。
$ ionic start todoer blank --v2 --ts
让我们仔细看看我们刚刚使用的命令：
- 离子启动
- 创建新的 Ionic 项目
- 做事者
- 命名我们的项目
- 空白的
- 标识我们要使用的模板。在本例中，我们将启动一个空白项目。
- --v2
- 标识我们正在使用 ionic 2。由于 ionic 2 仍处于测试阶段，因此除非指定其他版本，否则启动默认为版本 1
- --ts
- 使用 TypeScript。Angular 2 和 Ionic 2 都是用 TypeScript 编写的，它似乎将成为未来的默认语言。因此，我们也将使用它。
$ cd todoer
构建应用程序
让我们来看看这个应用程序的主要功能。
- 创建任务（或待办事项）
- 将任务标记为已选中或未选中
- 过滤已选中/未选中的任务
- 删除任务
设置 Firebase
登录或创建您的 Google Firebase 帐户。Firebase 是 Google 的实时数据库。
准备好帐户后，创建一个名为“todoer”的新项目。之后，点击“将 Firebase 添加到您的 Web 应用”。这将为您提供连接到 Firebase 的所有 API 信息。它应该看起来像这样：
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBBiOO44HzgIdsnzWG8JCic3MmEgsdfJ",
authDomain: "todoer.firebaseapp.com",
databaseURL: "https://todoer.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
</script>
复制并保存以供日后使用。
现在转到数据库并选择规则。默认情况下，Firebase 要求您进行身份验证。我们将更改这一点，以便任何人都可以访问我们的应用程序，稍后我们会添加身份验证。这样，我们就可以完成核心功能，而不必每次运行时都输入用户名和密码。请记住，这将在稍后更改。
使用以下命令发布调整后的规则：
{
"rules": {
".read": true,
".write": true
}
}
选择数据并将键“todos”和值“”添加到树中。
Firebase 配置
打开您的www/index.html文件，并将 Firebase 的配置信息粘贴到<ion-app></ion-app>标签之后和其他脚本标签之前。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<!-- Start Add -->
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBBiOO44HzgIdsnzWG8JCic3MmEgsdfJ",
authDomain: "todoer.firebaseapp.com",
databaseURL: "https://todoer.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
</script>
<!-- End Add -->
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/Reflect.js"></script>
<script src="build/js/zone.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
</body>
</html>
Firebase 现已准备就绪。
创建数据服务
为了充当 Firebase 和我们的应用之间的中介，我们将构建一个数据服务。为了本指南的目的，我们将把所有数据放在一个服务中。对于较大的应用程序，您可能希望将其拆分为多个服务。
首先让我们创建一个提供程序。
$ ionic g provider data
这将创建一个 @injectable 组件，我们将把它注入到我们应用程序的根目录中。你会问为什么是根目录？我们希望这项服务在我们的应用程序的整个生命周期内都存在，而不是每次我们加载页面时都存在。每个组件上注入的提供程序是在注入时创建的。所以，如果我们希望我们的数据持久化，我们必须将其注入到主应用程序组件中。
打开 app.ts 文件并在顶部添加：
import {Data} from './providers/data/data';
然后在组件中将数据添加到提供者；
@component({
providers: [Data]
});
Firebase 参考
Firebase 是一个实时的 nosql 数据库。我们通过查询路径访问其中的数据。例如，如果我们的数据如下所示。
{
todos: {
$todoId: {
title: 'todo1',
complete: false
},
$todoId: {
title: 'todo2',
complete: true
}
}
}
我们可以使用firebase.database().ref('/todos') 来访问待办事项列表；如果我们想要获取特定的待办事项，可以使用firebase.database().ref('/todos/$todoId');其中$todoId是待办事项的唯一 ID。firebase 中的所有数据都存储为对象。
因此，让我们将 Firebase 添加到数据提供程序
import {Injectable] from '@angular/core';
@Injectable()
export class Data {
private _db: any;
private _todosRef: any;
constructor() {
this._db = firebase.database().ref('/'); // Get a firebase reference to the root
this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos
}
现在我们有了对数据库的引用，我们如何获取数据？
Firebase 查询
Firebase 有一个事件库查询系统，可让您为某些事件设置侦听器。对于我们的用例，我们将侦听child_added事件。有关事件的完整列表，请参阅 Firebase 的 API 文档。
让我们将查询添加到数据服务类的构造函数中。
import {Injectable] from '@angular/core';
@Injectable()
export class Data {
private _db: any;
private _todosRef: any;
constructor() {
this._db = firebase.database().ref('/'); // Get a firebase reference to the root
this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos
this._todosRef.on('child_added', this.handleData, this); // ***ADD THIS LINE***
}
handleData(snap)
{
//Do something with the data
}
}
我们在构造函数中添加的行设置了一个侦听器，用于侦听子项添加到todos路径的情况。传入this.handleData来处理从 Firebase 发回的数据快照。最后，我们将其作为处理程序函数的上下文传递。
观察者和可观察对象
为了使我们的应用程序尽可能接近实时，我们将使用观察者模式。观察者内置于 Angular 2 中，并且（在撰写本文时）使用 RxJS（JavaScript 的 ReactiveX 库）。但是，该库将被 Angular 自己的库实现取代。
该模式的概念非常简单。观察者可以订阅并“观察”可观察对象。当数据被推送到可观察对象时，观察者会接收数据，直到可观察对象结束。简单地说，观察者-可观察对象关系是一种发布-订阅模式。
现在我们了解了观察者，让我们继续开发我们的应用。在您的 Data 类中，创建一个 ReplaySubject。什么是 ReplaySubject？Subject 既是观察者又是可观察者。通常，可观察者只会将最后一个事件发送给新订阅者。然而，ReplaySubject 会按照发送顺序将每条消息发送给新订阅者。效率稍低，但这样我们就不会错过任何旧的待办事项。
import {Injectable] from '@angular/core';
import {ReplaySubject} from 'rxjs/ReplaySubject';
@Injectable()
export class Data {
private _todos$: any;
private _db: any;
private _todosRef: any;
constructor() {
this._db = firebase.database().ref('/');
this._todosRef = firebase.database().ref('todos');
this._todosRef.on('child_added', this.handleData, this);
this._todos$ = new ReplaySubject();
}
get todos()
{
return this._todos$;
}
handleData(snap)
{
try {
// Tell our observer we have new data
this._todos$.next(snap.val());
}
catch (error) {
console.log('catching', error);
}
}
}
在我们的handleData()函数中，我们将获取数据库中数据的快照（因此称为snap ）。通过调用.val()函数，我们可以获取与该快照关联的值，并将其传递给我们的观察者。this._todos $.next(data)将新数据发送给设置为监听它的每个人。
创建任务
每次创建待办事项时，我们都希望我们的应用程序更新 Firebase。因此，让我们向数据提供程序添加一个保存待办事项的函数。
在您的data.ts文件中，添加以下方法：
save(todo)
{
return this._todosRef.push(todo).key;
}
推送功能将向 Firebase 添加新的待办事项，为其生成一个密钥，并通过.key属性返回该密钥。
现在，使用此 Ionic shell 命令生成一个新页面。$ ionic g page new-todo
您应该有三个新文件：new-todo.ts，new-todo.html和new-todo.scss。首先打开new-todo.ts文件，然后添加我们的数据服务。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
