Ionic-框架示例-全-

Ionic 框架示例（全）

原文：zh.annas-archive.org/md5/487bbbb59d8576c4529a806b20878e36

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

通过实例学习 Ionic 框架是一本逐步指南，涵盖了 Ionic 的非常基础的知识，旨在为读者提供理解和创建 Ionic 应用所需的所有必要知识。你将从学习 Ionic 的历史开始，然后逐渐学习如何设置并使用其出色的功能。你将学习如何使用 Ionic 并创建四个不同的 Ionic 应用，每个应用都会教你 Ionic 的不同重要功能。你还将学习如何使用 Firebase 将你的应用程序连接到数据库。本书还将为你提供一些链接，以进一步探索更高级的 Ionic 知识。

本书涵盖内容

第一章, 初识 Ionic，概述了 Ionic 的简要历史，旨在使用户确切了解 Ionic 是什么，简要向用户展示其一些功能。本章还将教你如何在计算机上设置 Ionic。

第二章, 待办事项应用，将帮助读者创建他们的第一个 Ionic 应用程序，一个简单的待办事项应用。用户还将编写他们第一行 Ionic 代码，并了解 Ionic 项目的外观。

第三章, 运行 Ionic 应用，为你提供了如何以不同方式查看你的 Ionic 应用的必要知识。你将在浏览器、使用 Ionic view 应用在移动设备上，以及在实际移动设备上运行和测试你的应用程序。

第四章, Ionic 组件，教授一些 Ionic 中真正酷炫的组件。你将创建一个更高级的待办事项应用，其中将包含一些 Ionic 组件，这些组件将使你能够在应用程序中创建一些复杂的列表项。

第五章, 伦敦旅游应用，创建了一种新的 Ionic 应用程序类型。你将创建一个应用程序，其中将包含伦敦市的一些非常酷的旅游目的地。

你还将学习如何从 JSON 资源查询数据，并在你的应用程序中消费这些数据。

第六章, 高级 Ionic 组件，帮助读者学习实现一些更高级的 Ionic 组件。你将学习在应用程序中实现 Ionic Popover 和模态窗口。

第七章, 自定义应用，专注于自定义 Ionic 应用程序。Ionic SDK 默认附带一些出色的工具，这些工具使得根据你品牌的指南自定义应用程序变得容易。

第八章，构建一个简单的社交应用，专注于学习如何使用 Ionic tabs 模板创建具有标签的 Ionic 应用程序。你还将查看构成标签模板的一些内容，并学习如何向其添加功能。

第九章，连接到 Firebase，专注于学习如何使用 Firebase 将后端集成到我们的 Ionic 应用程序中。你还将使用我们在第八章，构建一个简单的社交应用中创建的 tabs-app，来学习如何将 Firebase 集成到我们的应用程序中。

第十章, 总结，概述了我们尚未涵盖的关于 Ionic 的重要内容，这些内容可能对你非常有用。你还将了解一些关于 Ionic 的有用技巧，并发现一些如何更好地使用 Ionic 来开发优秀应用的精彩技巧。

你需要这本书的内容

首先，你需要一台 Windows、Linux 或 Mac 电脑来跟随本书中的代码示例。对 JavaScript 和 HTML5 有超越基础的或中级知识是理解本书中讨论的概念的必要条件。至少应具备对 Cordova 的基本理解。你还需要了解如何在终端窗口中发出命令。你应该能够访问一个有效的互联网连接，并且对于第九章，连接到 Firebase，需要一个 Google 账户。

这本书面向的对象

本书旨在帮助那些想要学习如何使用 Ionic 创建混合移动应用程序的个人。本书非常适合对 HTML5 和 JavaScript 有超越基础熟悉的当前网络开发者。AngularJS 开发者阅读本书也会感到很自在，因为 Ionic 是用 AngularJS 构建的。对 HTML5 和 JavaScript 有良好理解的本地 iOS 和 Android 开发者也将从本书中受益匪浅，并获得创建混合移动应用的知识。

规范

在本书中，你会发现许多文本样式，用于区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称的显示方式如下：“你还会注意到，在你的www/lib文件夹中，有一个名为ionic的文件夹，其中包含运行 Ionic 所需的所有文件。”

代码块设置如下：

<div class="list">
    <div class="item item-input-inset">
        <label class="item-input-wrapper">
            <input type="text" placeholder="enter todo item">
        </label>
        <button class="button button-small">
            Add
        </button>
    </div>

任何命令行输入或输出都按以下方式编写：

ionic serve

新术语和重要词汇以粗体显示。你在屏幕上看到的单词，例如在菜单或对话框中，在文本中显示如下：“向下滚动到更多工具选项，并选择开发者工具选项，如以下截图所示。”

注意

警告或重要提示会以这样的框显示。

小贴士

小技巧和窍门如下所示。

读者反馈

我们始终欢迎读者的反馈。告诉我们你对这本书的看法——你喜欢什么或不喜欢什么。读者反馈对我们来说很重要，因为它帮助我们开发出你真正能从中获得最大价值的标题。

如要向我们发送一般反馈，请简单地发送电子邮件至 <feedback@packtpub.com>，并在邮件主题中提及书籍标题。

如果你在某个领域有专业知识，并且你对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南，网址为 www.packtpub.com/authors。

客户支持

现在你已经是 Packt 书籍的骄傲拥有者，我们有一些事情可以帮助你从购买中获得最大价值。

下载示例代码

你可以从你购买的所有 Packt 出版物的账户中下载示例代码文件。www.packtpub.com。如果你在其他地方购买了这本书，你可以访问 www.packtpub.com/support 并注册，以便将文件直接通过电子邮件发送给你。

错误更正

尽管我们已经尽最大努力确保内容的准确性，但错误仍然可能发生。如果你在我们的某本书中发现了错误——可能是文本或代码中的错误——如果你能向我们报告这一点，我们将不胜感激。通过这样做，你可以帮助其他读者避免挫败感，并帮助我们改进本书的后续版本。如果你发现任何错误更正，请通过访问 www.packtpub.com/submit-errata，选择你的书籍，点击错误更正提交表单链接，并输入你的错误更正详情。一旦你的错误更正得到验证，你的提交将被接受，错误更正将被上传到我们的网站或添加到该标题的错误更正部分下的现有错误更正列表中。

要查看之前提交的错误更正，请访问 www.packtpub.com/books/content/support，并在搜索字段中输入书籍名称。所需信息将在错误更正部分显示。

侵权

互联网上对版权材料的盗版是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现任何形式的我们作品的非法副本，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过 <copyright@packtpub.com> 联系我们，并提供疑似盗版材料的链接。

我们感谢您在保护我们的作者和我们为您提供有价值内容的能力方面的帮助。

问题

如果您对本书的任何方面有问题，您可以联系 <questions@packtpub.com>，我们将尽力解决问题。

第一章. 初识 Ionic

在我们开始这本书之前，了解我们正在处理的内容非常重要。了解这个问题的最好方式是通过简要回顾移动开发的历史，并了解像 Ionic 这样的工具如何帮助移动开发者创建美观的移动应用程序。

开始

2006 年，随着苹果公司推出 iPhone，智能手机时代开始了。到 2008 年，谷歌推出了对苹果 iOS 操作系统的回应。这个新的操作系统被称为Android，到 2010 年，iOS 和 Android 主导的智能手机在移动生态系统中占据了主导地位。快进到今天，尽管微软的 Windows 移动在移动领域取得了一些进展，但 iOS 和 Android 的统治地位并没有太大变化。可以说，Android、iOS 和 Windows 构成了生态系统的主体，其中前两者以很大的优势处于前沿。

智能手机时代的到来也催生了移动应用程序的概念。移动应用程序是我们通过手机获取和传递大部分内容的中介。它们非常出色，几乎每个智能手机用户都在他们的设备上下载了多个应用程序来执行特定操作或实现特定目标。这对开发者来说是一个巨大的机遇，软件供应商也提供了工具，使开发者能够为用户创建自己的第三方移动应用程序。我们把这些使用软件供应商提供的工具构建的应用程序称为原生移动应用程序。

问题

尽管移动应用非常出色，但它们的发展方式存在一个小问题。首先，对于每个移动开发平台，软件供应商都提供自己独特的一套工具来为其平台构建应用程序。我们把这些工具称为 SDK。下表展示了每个平台在工具和 SDK 选项方面的差异，以及如何为它们的生态系统创建原生移动应用程序：

操作系统	SDK	编程语言
iOS	iOS SDK	Objective-C/Swift
Android	Android SDK	JAVA
Windows for mobile	Windows SDK	.NET

为了明确表达，我们并不是试图贬低原生工具的使用。如前所述，原生工具虽然很好，但代价高昂且时间紧迫。首先，你不能使用同一套工具为不同的平台构建相同的应用程序。对于你的应用程序的 Android 版本，你需要一支熟练的 Android 开发者团队。对于 iOS 版本，你需要一支 Objective-C 或 Swift 开发者团队来创建相同应用程序的 iOS 版本。此外，这两个团队之间没有代码共享，这意味着在一个平台上开发的功能必须完全在另一个平台上再次开发。这在开发方面非常低效，且耗时很长。

另一个问题是因为你雇佣了两个完全独立的团队，尽管他们都在尝试创造相同的东西，但你却面临不断上升的成本。例如，如果你决定你想为你的移动应用创建一个移动版的 Windows，你需要招募另一个.NET 开发团队，他们必须从头开始构建其他现有平台上的所有内容，因为他们不能重用任何已经构建的工具。

对于像 Facebook 这样的公司来说，它以数十亿美元的收入为生，选择原生开发路径可能是有意义的，因为原生开发的成本和人才可能不是他们关心的问题。然而，对于大多数人来说，他们想要尽快推出一个简单、出色、强大的应用。此外，有些人希望利用他们现有的技能集为多个平台构建应用，而无需学习新的编程语言。

在移动应用出现之前，Web 应用在很大程度上统治了世界。我们拥有更多人为 Web 技术开发，这些技术主要由 HTML、CSS 和 JavaScript 组成。我们习惯于 Web 的一个伟大之处在于它的平台无关性。这意味着只要你在任何设备上有一个浏览器应用程序，你就能无任何问题地与任何 Web 应用进行交互。

因此，当移动应用出现时，这对大多数 Web 开发者来说是一个巨大的变化，因为移动应用每个平台都是自给自足的，为某个平台制作的移动应用在另一个平台上将无法工作。

Apache Cordova

Apache Cordova 是一种技术，它允许任何 Web 应用被打包成原生移动应用，同时提供对设备功能的访问。多亏了 Adobe 和开源社区，这项技术在过去几年中取得了巨大的增长，越来越多的应用正在使用 Cordova 构建。用 Cordova 构建的应用通常被称为混合应用。但什么是混合应用呢？

在 Cordova 的上下文中，混合应用实际上是一个存在于原生移动应用薄容器中的 Web 应用。

事实上，在它们能做什么方面，原生移动应用和 Web 应用之间唯一的区别是原生移动应用可以访问设备硬件功能。

事实上，混合应用实际上是一个在手机浏览器视图中提供 Web 应用的本地应用。它表现得像一个正常的应用程序，并且可以完全访问设备功能，这要归功于 Cordova。

然而，Cordova 相比于原生开发技术的主要优势在于，你只需要维护一个代码库，并且可以使用这个相同的代码库为多个平台构建应用程序。这是 Cordova 到目前为止的主要卖点，因为使用这种技术，你可以获得巨大的成本和时间节省优势。

早期的混合应用程序

当第一批混合应用程序开始推出时，有几个问题似乎持续存在。第一个问题是很多人抱怨这些混合应用程序没有与原生移动应用程序相同的用户界面和用户体验。主要原因是在构建原生应用程序时，所有构建块都已经为你准备好了。例如，我们有预提供的动画、滑动手势、标签等。混合应用程序未能提供类似的功能，因为在网络上，我们只有 HTML、CSS 和 JS。没有预提供的组件来处理动画、手势和标签等。

这意味着几乎所有试图构建混合应用程序的人都必须从头开始构建这些功能。这并不好，不同的人对相同的功能有不同的实现。因此，许多通过混合方式构建的应用程序在视觉上并不吸引人。我们需要的是一个由中心维护的框架，它为我们提供了构建具有原生应用程序功能的网络技术所需的所有工具。

什么是 Ionic？

Ionic 是一个框架，它允许你使用 HTML5、CSS 和 JavaScript 等网络技术构建混合移动应用程序。但 Ionic 的功能远不止于此。Ionic 提供了你可以用来为移动应用程序构建类似原生功能的组件。将 Ionic 视为制作你的混合移动应用程序的 SDK。大多数你在原生应用程序上拥有的功能，如模态框、手势、弹出窗口等，都是由 Ionic 提供的，并且可以轻松扩展以添加新功能或根据你的需求进行定制。

Ionic 本身并不赋予你与设备功能如 GPS 和摄像头进行通信的能力；相反，它与 Cordova 并行工作以实现这一功能。Ionic 的另一个优点是它的所有组件耦合度都很低。如果你愿意，你可以选择只使用一些 Ionic 来构建现有的混合应用程序。

Ionic 框架是用 AngularJS 构建的，这可能是最经过测试和广泛使用的 JavaScript 框架。这个特性特别强大，因为它为您提供了 Angular 的所有优点，作为您开发的任何 Ionic 应用的一部分。在过去，构建混合应用证明是困难的，但有了 Angular，我们可以使用单页应用（SPA）技术来创建移动应用。Angular 还使组织您的应用以进行开发和跨团队协作变得非常容易，同时为您提供轻松添加自定义功能或库的可能性。

ionic 的简短历史

在我们深入探讨之前，首先让我们回顾一下关于混合应用及其工作原理的知识。记住，混合移动应用实际上是一个运行在轻量级原生包装环境中的网页应用。

还要记住，原生应用已经内置了组件，使您能够为移动应用创建美观的用户界面。由于混合应用使用 Web 技术，没有提供 SDK 或组件来创建移动 UI。Ionic 团队看到了这个问题，并创建了一个解决方案，即 Ionic 框架。Ionic 框架提供了 UI 组件来构建美观的混合应用。

Ionic 的功能

Ionic 为您提供了许多酷炫的功能和技巧，帮助您快速创建美观且功能完善的混合应用。Ionic 的功能可以分为三个类别：

• CSS 功能

• JavaScript 功能

• Ionic CLI

CSS 功能

首先，Ionic 自带一个优秀的 CSS 库，提供了一些样板样式。这些 Ionic CSS 样式是用SASS生成的，它是用于更高级 CSS 样式操作的 CSS 预处理器。

ionic 内置了一些酷炫的 CSS 功能，包括：

• 按钮

• 卡片

• 标题和页脚

• 列表

• 表单元素

• 网格系统

所有这些功能以及更多，都已经为您准备好，并且易于自定义。它们还具有与原生组件相同的视觉和感觉，因此您无需进行任何编辑即可使它们看起来像原生组件。

JavaScript 功能

JavaScript 功能是 Ionic 框架的核心，对于构建 Ionic 应用至关重要。它们还包括其他功能，让您能够从底层进行操作，例如自定义您的应用或提供帮助函数，使您的应用开发更加愉快。实际上，许多这些 JavaScript 功能都作为 HTML 自定义元素存在，这使得声明式使用这些功能变得容易。

其中一些功能包括：

• 模态

• 滑块

• 操作表

• 侧边菜单

• 标签

• 复杂列表

• 集合重复

Ionic 的所有 JavaScript 功能都是用 Angular 构建的，并且大多数都可以轻松地作为 Angular 指令插入。每个功能也执行不同的操作，帮助你实现特定功能，并在 Ionic 网站上都有文档说明。

The Ionic CLI

这是构成 Ionic 框架三大支柱的最后一部分。Ionic CLI 是一个非常重要的工具，它允许你通过命令行/终端使用 Ionic 命令。它还使我们能够访问一些使我们的应用开发过程更加流畅的 Ionic 功能。它可以说是 Ionic 中最重要的部分，也是你将用于执行大多数操作的功能。

Ionic CLI 的功能让你可以执行以下操作：

• 创建 Ionic 项目

• 执行 Cordova 命令

• 开发和测试

• Ionic 启动画面/图标生成器

• Ionic 实验室

• SASS

• 将应用上传到 Ionic View

• 访问 Ionic.IO 工具

The Ionic CLI 是一个非常强大的工具，在大多数情况下，我们将在这本书中使用它来执行特定操作。这就是为什么我们首先要做的是设置 Ionic CLI。

设置 Ionic

以下步骤将简要介绍如何设置 Ionic：

1. 安装 NodeJS：要设置 Ionic，你首先需要在电脑上安装 NodeJS，以便你可以访问 Node 包管理器（NPM）。如果你已经在电脑上安装了 NodeJS，你可以跳过此步骤并进入步骤 2。要在电脑上安装 NodeJS，请执行以下步骤：

   1. 前往 www.nodejs.org 并点击适合你电脑的最新稳定版本。这应该在你的电脑上下载最新版本的 NodeJS。如果你使用的是 Mac、PC 或 Linux，适合你操作系统的正确版本将被自动下载。不用担心，如果你使用的是 Mac、PC 或 Linux，正确的版本将自动下载。

   2. 下载完成后，在你的电脑上安装下载的软件。如果你使用的是 Windows，你可能需要重新启动电脑。

   3. 如果你使用的是 Mac/Linux，请打开终端；如果你使用的是 Windows，请打开命令行窗口。输入命令 node –v 并按 Enter。

   你应该能看到你当前 NodeJS 安装版本的版本号。如果你看不到版本号，这可能意味着你没有正确安装 NodeJS，应该尝试再次运行步骤 1。

2. 安装 Ionic CLI：下一步是使用 NPM 安装 Ionic CLI。

   1. 在 Mac/Linux 上打开一个新的终端或 Windows 上的命令行窗口，并运行以下命令：npm install ionic –g。如果你使用的是 Linux/OS X，你可能需要运行 sudo npm install ionic –g。此命令旨在全局安装 Ionic。

   2. 在此运行完成后，在你的终端/命令行上运行命令 ionic –v 并按 Enter。

   你应该能看到你的 Ionic CLI 的版本号。这意味着你已经正确安装了 Ionic，可以继续操作。如果你使用的是 Windows 机器，你可能需要重新启动机器才能看到版本号出现。

   如果你没有看到版本号，那么你的机器上安装的 Ionic 不正确，应该再次执行步骤 2。

摘要

在本章中，我们首先了解了一些关于移动应用程序的一般背景。我们学习了原生移动应用程序是如何工作的，它们是如何使用原生 SDK 构建的，以及每个平台是如何使用一套完全不同的工具构建的，它们之间没有任何资源共享。然后我们简要讨论了 Apache Cordova 以及它旨在解决跨平台开发问题的方法。

我们接着讨论了 exactly what Ionic 的含义以及它旨在解决什么问题。我们还简要讨论了 Ionic 框架的 CSS、JS 和 Ionic CLI 特性。

在下一章中，我们将使用 Ionic CLI 创建我们的第一个 Ionic 应用程序，并且我们将创建一个具有一些出色 Ionic 特性的简洁待办事项列表应用程序。

第二章。待办事项应用

在本章中，我们将深入探讨 Ionic，并会使用大量的 Ionic CLI 工具。我们将创建我们的第一个 Ionic 应用程序，并添加一些基本的 Ionic 功能到我们的应用程序中。我们将使用 Ionic 首次运行我们的应用程序，并在 Chrome 中调试我们的应用程序。我们将通过创建一个待办事项应用程序来结束本章。此应用程序将简单地让我们添加项目到我们的应用程序中，并提供一种删除这些项目或标记它们为完成的方法。

创建我们的第一个应用程序

使用 Ionic 创建新项目实际上是一个非常轻松的过程，因为有了 Ionic CLI。创建新的 Ionic 项目有多种方法，但最简单和最标准的技巧是使用 Ionic 模板。这是迄今为止最简单的方法，它允许我们使用 Ionic 提供的三个标准模板中的任何一个。

这些模板包括：

• 空白模板：这会创建一个新的项目，其中包含一些样板代码，以帮助您设置空白应用程序

• 标签模板：这与第一个模板相同，但您将获得一个具有标签设计的应用程序，而不是空白应用程序

• 侧边菜单模板：这会创建一个具有侧边菜单设计和一些样板代码的新应用程序

我们将在本书的某个时候使用这些工具。现在，我们将从第一个开始，使用空白模板创建一个全新的 Ionic 项目。在我们继续之前，让我们看看 Ionic CLI 用于创建新应用程序的命令：

ionic create [Name Of App] [template]

Ionic CLI 的 create 命令允许我们提供两个参数，第一个是我们希望应用程序被称作的名称。这个第一个参数也将是生成文件时创建的文件夹的名称。第二个参数是模板名称。如前所述，有三种模板样式。您可以通过传递 blank、tabs 或 side menu 作为参数来表示您想要生成的应用程序模板类型。

创建我们的待办事项应用程序

我们将创建我们的待办事项应用程序。我们将使用空白模板来完成这个任务。为了保持一致性，我们将把我们的应用程序称为 todo。要创建 todo 应用程序，请运行以下命令：

ionic start todo blank

此命令将创建一个名为 todo 的新空白 Ionic 应用程序。当此命令运行完成后，通过在命令行中运行以下命令进入您的应用程序项目：

cd todo

要进一步探索我们新创建的 todo 应用程序，请打开您最喜欢的 IDE 中的 todo 应用程序文件夹。

Ionic 工作流程

当您创建一个新的 Ionic 项目时，有几个文件夹和文件作为生成项目的一部分提供。您的目录应类似于以下截图所示：

你看到的结构基本上与每个 Cordova 项目相同，除了几个文件和文件夹。例如，有一个 scss 文件夹。这个文件夹包含一个文件，允许我们自定义应用的外观和感觉，将在后面的章节中详细说明。还有 platforms 和 plugins 文件夹。在大多数情况下，platforms 文件夹是自动生成的，但在这本书中我们不会涉及它们，所以你可以暂时忽略它们。

你还会注意到在你的 www/lib 文件夹中，有一个名为 ionic 的文件夹，它包含运行 Ionic 所需的所有文件。这里有 css、fonts、js 和 scss 文件夹。

• css: 这个文件夹包含一个 Ionic 应用附带的所有默认 CSS。

• fonts: Ionic 自带自己的字体和图标库，称为 Ionicons。这个 Ionicons 库包含数百个图标，所有这些图标都可以在你的应用中使用。

• js: 这包含了核心 Ionic 库的所有代码。由于 Ionic 是用 Angular 构建的，这里有一个 Angular 版本和一些其他文件，这些文件共同构成了 Ionic 框架。

• scss: 这是一个包含用于构建美丽的 Ionic 框架 CSS 样式的 SASS 文件的文件夹。这里的一切都可以轻松覆盖，以使你的应用感觉更加定制化，我们将在 第七章，自定义应用 中讨论你如何做到这一点。

如果你查看根文件夹，你会看到很多其他文件，这些文件是作为 Ionic 工作流程的一部分为你生成的。这些文件现在并不特别重要，但让我们在下面的列表中查看一些更重要的文件：

• bower.json: 这是包含从 bower 包管理器获取的一些依赖项的文件。浏览器依赖项在 bowerrc 文件中指定的 lib 文件夹中解析。这是一个指定你项目可能需要的其他第三方依赖项的好地方。

• config.xml: 这是由任何 Phonegap/Cordova 项目附带的标准 config 文件。在这里，你可以请求设备功能的权限，并指定你应用的通用和平台特定配置。

• gulpfile: Ionic 使用 Gulp 构建工具，这个文件包含一些由 Ionic 提供的代码，可以让你做一些令人惊叹的事情。我们将在 第七章，自定义应用 中使用这个文件的一些功能，当我们进行一些自定义任务时。

• ionic.project: 这是一个专门用于 Ionic 服务的文件。它是 Ionic CLI 和 ionic.IO 服务用来指定一些特定于 Ionic 的配置的文件。当我们使用 第三章 中的 Ionic view 应用时，我们会使用这个文件的一些功能，即 运行 Ionic 应用。

• package.json: 这是一个由 node 用于指定一些 node 依赖的文件。当您使用 Ionic CLI 创建项目时，Ionic 会使用 Node 和 Bower 包管理器来解决一些依赖项。如果您在开发 Ionic 应用时需要 node 模块，您可以在该处指定这些依赖项。

这些文件是默认包含在用 Ionic CLI 创建的项目中的某些较为重要的文件。目前您不需要过分担心它们，但了解它们的存在以及它们代表的内容总是一个好主意。

对我们的项目的深入了解

在我们开始任何开发工作之前，了解如何实际向我们的应用添加功能和在哪里进行这些操作是至关重要的。我们将特别关注两个文件：

• index.html: 这个文件是您应用的实际入口点。它是一个基于空白 Ionic 模板的正常 HTML 页面，包含一些样板代码。如果您仔细观察，您会看到一些自定义 HTML 标签，如 <ion-pane>、<ion-header> 和 <ion-content>。这些自定义标签实际上是使用 Angular 构建的 Ionic 组件，目前您不需要担心它们的功能，因为我们很快就会讨论这个问题。更仔细地查看 <body> 标签，您也会发现属性 ng-app=starter。这是 Angular 提供的一个自定义属性，我们用它来提供 Angular 应用的主模块名称。

• app.js: 这个文件位于 js 文件夹中，它是包含我们应用主模块的文件。在 Angular 中，模块为我们提供了一种创建应用使用的隔离代码块的方法。主模块是当应用启动时实际加载到应用中的模块。将主模块视为应用的入口点。如果您仔细查看 app.js 文件，您会看到我们如何创建模块并将其名称指定为 starter：

  angular.module('starter', ['ionic'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard .hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  

  提示

  下载示例代码

  您可以从 www.packtpub.com 下载您购买的所有 Packt 出版物的示例代码文件。如果您在其他地方购买了这本书，您可以访问 www.packtpub.com/support 并注册，以便将文件直接通过电子邮件发送给您。

  你还会看到它接受一个第二个参数，一个包含一个名为 ionic 的字符串的数组。在 Angular 中，这个数组用于提供应用程序依赖的任何模块的名称。所以，就像我们在 index.html 文件中将我们的主模块名称 starter 指定给 ng-app 属性一样，我们指定了一个列表，其中包含我们的主模块所依赖的模块，在这种情况下，是 ionic。

  你也会注意到 app.js 中有一个 run 函数。这个函数是在我们的应用程序准备好并且所有依赖的 Angular 模块和工厂都已加载时触发的函数。run 函数是一个很好的地方，可以在应用程序开始时立即完成一些整理工作。

这两个文件是你需要关注的，因为它们是我们构建待办事项列表应用程序时将主要使用的两个文件。

想象我们的应用程序

在构建任何应用程序之前进行一点简单的线框设计总是好的。这使你能够在实际开始编码应用程序之前了解应用程序的工作方式和外观。以下截图是我们 todo 应用程序的大致线框：

我们的 todo 应用程序允许用户简单地将他们想要添加到待办事项列表中的任何任务输入进去。想象这个应用就像一个迷你日记，你可以把想要稍后完成的任务记录进去。在本节中，我们只将构建我们 todo 应用程序的最基本功能，并且只允许用户添加新项目。在后面的章节中，随着我们对 Ionic 的了解加深，我们将添加更多复杂的功能，比如使用复杂列表，并允许用户编辑、删除，甚至存档待办事项列表项。

构建我们的 todo 应用程序

要开始构建我们的 todo 应用程序，我们需要将我们想要实现的目标进一步分解成更小的步骤。我们首先需要做的是创建我们应用程序的界面。

创建用户界面

要开始构建我们的 todo 应用程序，我们首先要构建用户界面。我们将构建输入表单和添加当前输入框中 todo 项的按钮。在编写完这段代码后，我们将添加我们想要显示任何输入 todo 项的列表的标记。以下代码中我已经为您编译了这些标记：

<div class="list">
    <div class="item item-input-inset">
        <label class="item-input-wrapper">
            <input type="text" placeholder="enter todo item">
        </label>
        <button class="button button-small">
            Add
        </button>
    </div>
</div>
<ul class="list">
    <li class="item>

    </li>
</ul>

从前面的代码中，你可以看到我们用户界面的外观已经准备好了。我们有一个接收我们想要输入到待办事项列表中的内容的输入框。我们有一个 HTML 无序列表，它将被放置在待办事项列表项所在的位置。你可以在我们的某些元素上看到一些类。这些实际上是来自自动生成的 Ionic CSS 样式的类，这些样式是任何 Ionic 项目的一部分。

代码

由于我们已经为我们的应用程序编写了用户界面，我们还需要编写 Angular 代码来使其能够工作。我们需要做的是创建一个数组来保存待办事项列表，并创建一个函数，以便在点击我们之前创建的添加按钮时将待办事项项添加到这个列表中。我们将通过在主模块中创建一个 Angular 控制器并插入所有这些逻辑来实现这一点。我已经编写了这段代码，您可以从以下链接复制它并将其添加到您的项目中：

.controller('TodoController', function ($scope) {
  $scope.todos = [];
  $scope.todoModel = {};
  $scope.todoModel.todo = '';
  $scope.addTodo = function () {
    $scope.todos.push($scope.todoModel.todo);
    $scope.todoModel = {
        todo: ''
    };
  };
})

从前面的代码中，您可以看到我们创建了一个名为TodoController的控制器。在这个TodoController中，我们有一个todos数组。这个数组将保存所有的todo项。我们还有一个todoModel对象，它是一个空对象，将保存我们输入的todo项。最后，我们有一个名为addTodo的函数，它将todoModel对象中的当前值添加到todos数组中，然后将当前todoModel对象的值设置为空字符串，以便我们可以从头开始输入。

连接组件

现在我们已经创建了用户界面的模板代码，并且为它编写了代码，现在是时候将它们连接起来并指定它们应该出现在哪里：

<ion-content ng-controller="TodoController">
    <div class="list">
        <div class="item item-input-inset">
            <label class="item-input-wrapper">
                <input type="text" placeholder="enter todo item" ng-model="todoModel.todo">
            </label>
            <button class="button button-small" ng- click="addTodo()">
                Add
            </button>
        </div>
    </div>
    <ul class="list">
        <li class="item" ng-repeat="todo in todos track by $index">
            {{todo}}
        </li>
    </ul>
</ion-content>

如果您查看前面的代码，您会看到 UI 代码现在看起来有些不同。首先，我们已经将我们的<ion-content>元素与TodoController关联起来。这样做是为了创建一个绑定上下文，这意味着TodoController中的任何变量现在都可以用于与其所有后代的数据绑定。其次，您也会注意到我们的输入现在有一个新的ng-model属性，它绑定到TodoController中的todoModel变量。这是将任何时间点的输入标签的值绑定到todoModel对象。第三，我们在添加 todo按钮上设置了一个ng-click属性，以确保每次点击时都会向我们的数组中添加一个新的todo项。最后，我们在 UL 元素内进行了ng-repeat操作，以指定我们想要将todo数组的所有子项渲染为 LI。

通过这种方式，我们已经成功完成了todo应用的开发，剩下的就是看到它实际运行的效果。在下一章中，我们将学习如何以不同的方式运行我们刚刚构建的应用程序，所以请继续学习如何运行和实时测试您的应用程序。

摘要

在本章中，我们使用 Ionic 空白应用程序模板创建了我们的第一个 Ionic 应用程序。我们查看了一下 Ionic 的工作流程，并看到了组成工作流程的一些文件。然后我们深入讨论了我们打算如何构建我们的待办事项列表应用程序。我们进一步进行了实际操作，根据线框实现了待办事项列表应用程序的 UI。我们编写了一些 Angular 代码，并将其连接到我们创建的用户界面。

在下一章中，我们将学习使用 Ionic CLI 首次运行和测试我们的应用程序的不同方法。

第三章：运行 Ionic 应用程序

在本章中，我们将学习如何使用各种方法测试和运行我们的 Ionic 应用程序。我们将从学习使用最简单的 Ionic 技术开始：通过使用ionic serve命令将我们的应用程序部署到 Chrome 浏览器。然后，我们将继续使用 Ionic view 移动应用程序（iOS/Android）来了解我们如何在移动设备上测试我们的应用程序。最后，我们将学习如何使用我们各自平台的原生 SDK 的传统构建系统运行和部署我们的 Ionic 应用程序。

运行我们的待办事项应用程序

在上一章中，我们使用 Ionic 空白模板创建了我们的第一个 Ionic 应用程序。我们进一步工作于该应用程序，并制作了一个待办事项列表应用程序。我们编写了一些 Angular 代码，并对一些 Ionic 代码有了一些初步的了解。然而，我们没有看到我们的应用程序在运行。我们可以通过许多方式运行 Ionic 应用程序，我们将学习的第一种技术是ionic serve技术。

ionic serve 技术

ionic serve技术是查看您的应用程序运行情况的最简单方法。在安装 Ionic CLI 之后，不需要额外的设置，只需要您有一个网络浏览器。我们现在将使用ionic serve技术测试我们创建的todo应用程序，该应用程序是在上一章中创建的。要使用此技术测试您的应用程序，只需打开一个新的命令行窗口并按照以下步骤操作。

小贴士

浏览器选择

建议您使用 Google Chrome 作为默认浏览器。Google Chrome 有一些非常强大的开发工具，并且本书中的所有练习都假设您已经安装了 Google Chrome 作为默认浏览器。您可以通过访问此 URL 下载 Google Chrome 的副本：www.google.com/chrome。

1. 从你的终端导航到你的 Ionic todo应用程序的根目录。

2. 在您的命令行窗口中运行以下命令：

   ionic serve
   
   

   注意

   如果您被提示选择一个 IP 地址，您可以从提示的列表中选择任何一个，然后按Enter键启动。

如果你正确地遵循了步骤，你应该会看到一个浏览器窗口弹出，其中运行着你的应用程序。你也会注意到，你输入命令的命令行窗口中正在进行一些操作。

通过这种方式，我们已经成功地将我们的应用程序部署到浏览器中，并且可以像测试其他任何 Chrome 上的 Web 应用程序一样测试我们的 Ionic 应用程序。这个技术的优点是，不需要额外的设置，你只需要在你的机器上安装 Ionic CLI 和 Chrome 浏览器。

使用 Chrome 进行模拟

尽管我们的应用程序在 Chrome 浏览器上运行，但它全屏显示，就像一个普通的全屏 Web 应用程序。这对我们来说并不理想，因为我们的应用程序是一个移动应用程序。幸运的是，Chrome 有一个很棒的模拟工具，它允许你模拟你的应用程序，就像它在普通手机上运行一样。

要使用 Chrome 的模拟功能，请按照以下步骤操作。

注意

这些步骤假设您已经将您的应用在 Chrome 浏览器上运行，并且您当前位于该应用运行的标签页上。

1. 点击如图所示的 Chrome 菜单图标：

2. 滚动到更多工具选项并选择开发者工具选项，如图所示：

3. 点击如图所示的设备模式切换图标：

这应该会弹出一个包含您应用运行的 Chrome 模拟器窗口。您可能需要刷新页面以正确渲染应用。如果您查看窗口，您将看到一个位于左上角的下拉菜单，其中列出了您可以模拟的设备。我通常推荐使用 Nexus 5 来测试 Android，以及使用 iPhone 6 来测试 iOS。这是因为 Nexus 5 的分辨率超过了今天许多可用的 Android 手机，因此将其作为基础是非常有意义的。同样，对于 iPhone 6 也是如此；由于它是撰写本文时的苹果旗舰设备，因此用于模拟也是合理的。

您可以像在模拟器中运行一样完全与您的应用交互。您还拥有 Chrome 开发者工具的全部功能，可以检查元素并查看您的应用程序代码是如何表示的。为什么不尝试使用您的应用并添加一些待办事项列表项，看看它们是如何填充的呢。

Ionic serve labs

ionic serve技术中还有一种风味，让我们能够同时看到我们的应用在 iOS 和 Android 上的样子。这种技术被称为 Ionic labs 技术。

小贴士

这种技术应仅用于查看应用，并不打算用于调试。

要使用 Ionic labs 技术查看您的应用，请按照以下步骤操作。

小贴士

如果您已经使用ionic serve技术查看您的应用，只需按Q键退出当前会话或关闭命令行窗口，然后打开一个新的窗口。

1. 确保您位于项目的根目录中。

2. 在您的终端中输入以下命令：

   ionic serve --lab
   
   

   

运行此命令应该会像第一次运行 ionic serve 命令时一样弹出一个新的浏览器窗口；只是这次，你会看到两个针对你的应用的模拟，一个用于 iOS，一个用于 Android，如前一张截图所示。这是同时查看你的应用在两个平台上运行的一个非常好的方式。Ionic 有一个术语叫做 Continuum，你将在后面的章节中看到它的实际应用。这种现象指的是某些元素在不同平台上看起来不同。例如，iOS 上的标签通常放在底部，而 Android 上则传统地放在顶部。Ionic 提供了这些功能，并提供了一种进一步覆盖这些行为的方式。ionic serve 技巧是同时查看像在不同平台上标签位置不同的功能的一个很好的方法。

The Ionic view

另一种查看 Ionic 应用程序的技术是使用 Ionic view 应用程序。Ionic view 应用程序是由 Ionic 创建的一个移动应用程序，它提供了在 iOS 和 Android 上的 Ionic 框架。该应用程序用于查看你正在开发的任何 Ionic 应用程序，并与 Ionic IO 平台紧密协作。Ionic IO 平台是 Ionic 提供的一套工具，用于提供一些额外服务，如推送通知、分析等。

使用 Ionic view 测试 todo 应用程序

为了使用 Ionic view 应用程序，你必须拥有一个 iOS 或 Android 设备。你还需要一个 Ionic IO 账户。导航到 apps.ionic.io 创建你的 Ionic IO 账户。然后访问你的移动设备上的 view.ionic.io 并下载适用于你的移动设备的正确版本。

为了测试我们的 todo 应用程序，请按照以下步骤使用 Ionic view 应用程序进行测试：

1. 打开一个终端窗口，并从 第二章 导航到你的 todo 应用程序的根目录。

2. 简单地在你的终端中输入以下命令：

   ionic upload
   
   

此命令将请求你的 Ionic IO 账户的电子邮件和密码详细信息。当提示时输入这些详细信息，如果应用程序上传正确，你应该会看到一个消息说 成功上传 (APP_ID)，其中 APP_ID 是为你应用自动生成的标识符。

现在，你已准备好在移动设备上查看应用程序。为此，只需在你的手机上打开你的 Ionic view 应用程序，并使用你上传应用程序的相同 Ionic IO 账户登录。你应该以类似以下截图的方式看到你的应用程序。

从这里，你只需轻触 todo 应用程序，就会弹出一个包含多个选项的提示。你应该选择 下载文件 选项。完成此操作后，你可以简单地点击 查看应用程序 选项。如果你正确地遵循了说明，todo 应用程序应该会替换你的当前视图，你应该在 Ionic view 应用程序中看到它正在运行。

小贴士

你可以简单地用三根手指轻触屏幕，在任何时候返回到 Ionic 视图菜单。

Ionic view 是查看你的应用程序的好方法，当你想要与朋友、客户或老板分享应用程序的进度时，它非常有用。它有一个功能允许你通过电子邮件分享，你可以在 Ionic 官方文档中找到这些功能的文档。你还可以通过应用程序内部或通过 Ionic IO 网站 apps.ionic.io 在线管理你上传到 Ionic view 的应用程序。

设备

你也可以通过在物理设备上运行你的 Ionic 应用来测试你的 Ionic 应用程序。但是，为了这样做，你必须在你电脑上安装每个平台的本地 SDK。让我们简要看看如何在你的设备上运行一个 Ionic 应用。

Android

要在物理设备上运行 Ionic 应用，首先你需要确保你的 Android 设备已经通过 USB 连接到电脑。同时，你还需要确保在电脑上开启了开发者模式，并且启用了 USB 调试。

注意

这一假设你已经在你电脑上设置了 Android SDK，并且你也在你的机器上设置了 Cordova 和 Ionic。

确保你在终端窗口中处于项目的根目录，并运行以下命令：

ionic run android

如果你已经正确设置了所有配置，这个命令将会自动构建你的应用并在连接到电脑的设备上运行。

iOS

要在 iOS 设备上运行 Ionic 应用，首先你需要确保你已经安装了 iOS-deploy 包。

注意

你只能使用 Mac 电脑将你的应用部署到 iOS 设备上。这一步还假设你已经正确地在你的 Mac 电脑上设置了 iOS SDK 和 X-Code。

如果你没有安装 iOS-deploy 包，你可以通过运行以下命令使用 NPM 安装它：

npm install ios-deploy -g

将你的设备连接到你的 Mac 电脑，并确保它没有启用锁屏。只需运行以下命令即可将你的 Ionic 应用部署到设备上：

ionic run ios --device

这个命令应该在你的连接的 iOS 设备上自动构建和运行你的应用程序。

摘要

在本章中，我们学习了测试和部署我们应用的各种方法。我们首先使用 ionic serve 命令将我们的应用部署到浏览器上，使用 Chrome 浏览器。然后我们查看如何使用 Ionic labs 来提供我们的应用程序。接着我们使用 Ionic view 应用程序来查看如何在安装了 Ionic view 应用的 iOS 和 Android 设备上运行我们的应用。最后，我们简要介绍了如何在真实的 Android 或 iOS 设备上运行我们的 Ionic 应用程序。

在下一章中，我们将深入探讨一些更复杂的 Ionic 控件，我们将使用 Angular 的 $http 服务来了解如何在 Ionic 应用程序中执行 Ajax 调用并检索数据。

第四章。Ionic 组件

在本章中，我们将学习如何使用一些更复杂的 Ionic 组件和控制。我们将使用一些更高级的内置 Ionic 列表组件来创建我们在第二章中创建的待办事项应用程序的更高级版本，即待办事项应用程序。我们将把这个更高级的待办事项应用程序称为Bucket-List应用程序。这个应用程序背后的想法是，它将允许我们输入我们一生中想要尝试的所有有趣的事情。因此，我们可以输入我们想要参观的地方的名字，我们想要做的活动的名字，等等。

创建一个新的待办事项列表应用程序

在第二章的待办事项应用程序中，我们使用 Ionic 空白模板创建了一个简单的待办事项列表应用程序。我们能够使这个应用程序工作，是因为我们允许我们向我们的待办事项列表应用程序中添加条目。我们将使用 Ionic 空白模板创建一个新的待办事项列表应用程序，以便我们将新的、更高级的组件添加到我们全新的 BucketList 应用程序中。让我们按照以下步骤创建这个新的空白应用程序。我们将把我们的新应用程序称为Bucket-List，以便与我们在第二章中创建的待办事项应用程序区分开来。

1. 要创建Bucket-List应用程序，请在你的电脑上打开一个终端窗口，并通过运行以下命令导航到你的电脑的Desktop文件夹：

   cd Desktop
   
   

2. 在导航到你的电脑的Desktop文件夹后，运行以下命令以基于 Ionic 空白模板创建Bucket-List应用程序：

   ionic start Bucket-List blank
   
   

3. 这个命令将创建一个名为Bucket-List的新空白 Ionic 应用程序。当这个命令运行完成后，通过在命令行中运行以下命令导航到你的应用程序项目：

   cd Bucket-List 
   
   

现在你已经成功完成了创建你的Bucket-List应用程序的过程，我们可以通过添加功能来开始开发这个应用程序。

Bucket-List 应用程序概述

为了理解我们试图构建的内容，请仔细查看以下截图。我们的目标是创建一个最终应用程序，它与我们以下截图中的内容非常相似：

拆分应用程序

构建 Ionic 应用程序的一个好方法是分步骤进行。对于我们的Bucket-List应用程序，我们可以首先开发用户界面，然后编写代码以使其工作。我们的用户界面将包含一个输入框，用于将新项目输入到我们的 bucket 列表中。其次，我们必须为Bucket-List条目列表设计 UI。

设计 UI

设计 UI 涉及两个主要实现：

• 实现输入框

• 实现离子ion-list元素

我们将逐一查看。

实现输入框

我们将要实现的第一件事是一个输入框。这个输入框是用户将在Bucket-List应用程序中输入他们希望添加的有趣项目的表单。这将是一个带有一些离子 CSS 样式应用的 HTML textarea 输入框，以使其看起来更符合移动设备的外观和感觉。输入框旁边还将有一个带有标签添加的按钮。这个按钮就是我们输入一些文本后想要它出现在我们列表中的按钮。执行以下步骤：

1. 打开你之前在最喜欢的文本编辑器中创建的Bucket-List应用程序。

2. 现在，打开你项目www文件夹中的index.html文件。你会看到一个屏幕，其外观与我们下面的截图非常相似：

你可以看到，这个样板代码已经包含了一些自定义离子元素的代码，就像我们在第二章“待办事项应用程序”中看到的那样，所有这些元素都以ion为前缀。请密切关注<ion-content>元素！这个元素包含我们应用程序的各个部分或内容区域。我们将在这个元素之间放置我们Bucket-List应用程序的所有标记。

让我们从放置我们应用程序的输入框代码开始。我在下面的代码块中提供了我们输入框的代码。你需要在你的index.html文件中的<ion-content>元素内放置此代码：

<div class="list">

<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text">
</label>
<button class="button button-small">
      Add
</button>
</div>

</div>

上述代码是显示输入框和按钮的 HTML 代码，正如我们之前所描述的那样。如果你仔细查看标记，你会看到一些元素包含一些类。这些类是作为离子 CSS 的一部分可用的自定义离子类。离子 CSS 附带了许多实用的类和功能，但就目前而言，只需知道这些类是离子 CSS 的一部分即可。

如果你使用ionic serve方法在浏览器中运行你的应用程序，你应该能看到与我下面截图非常相似的东西。在终端窗口中输入以下命令以使用ionic serve方法运行你的应用程序。确保你从项目的根目录运行它：

ionic serve

你应该能够看到带有按钮放置在其右侧的输入框。

实现离子列表应用程序

开发我们的Bucket-List应用的下一步是实现ion-list应用。我们将使用一个名为ion-list的内置组件。ion-list元素是一个用于创建和渲染列表的组件。它有很多酷炫的功能，允许我们渲染具有侧选项的复杂列表。请看以下截图，展示了 iOS 移动设备上的邮件应用，展示了我们可以使用ion-list实现的功能列表：

如上图所示，我们可以使用ion-list实现的最明显功能之一是在我们滑动列表项时显示选项。它还具有其他功能，例如删除项目或重新排列它们的能力。

在我们的 Bucket-List 应用中使用 ion-list

对于我们的Bucket-List应用，我们将旨在使用<ion-list>组件来渲染通过输入框输入的每个项目。此外，我们希望能够通过从左侧滑动来删除列表中的每个项目，从而显示一个可点击的删除按钮。以下截图展示了我们旨在实现的内容以及涉及的项目：

ion-list 组件

我们将首先实现<ion-list>组件的代码。以下代码是<ion-list>的代码。您需要复制此代码并将其放置在您已经实现的输入框代码下方：

<ion-list>

</ion-list>

这是创建我们的<ion-list>组件所需的最顶层组件。<ion-list>组件有一些属性，允许我们执行一些更复杂的实现。我们不会探索这些属性，但值得知道它们确实存在。

下一步是实现<ion-list>组件的子项。<ion-list>组件中的每个项目都称为<ion-item>。

ion-item

如前一小节中简要提到的<ion-list>组件，<ion-list>中的每个项目被称为<ion-item>。在<ion-item>内部，我们将放置我们想要每个列表项渲染的代码。它也是我们使用 Angular 的ng-repeat功能的地方。对于我们的应用，我们只想渲染每个Bucket-List项目的名称。这意味着我们可以将每个Bucket-List项目视为一个<ion-item>。

目前，我们只是在实现中添加一些占位文本，以展示Bucket-List项目将如何潜在地看起来。以下代码块是我们应用中代表Bucket-List项目的<ion-item>的实现：

<ion-item>
<h2>Bucket List Item</h2>
</ion-item>

这是我们的<ion-item>的一个示例表示。如果您仍然通过ionic serve技术在浏览器中运行您的应用，您应该能够看到渲染的<ion-item>，就像以下截图所示：

现在，随着这个实现的完成，我们还需要做一件事来完成Bucket-List应用程序用户界面的实现。剩下的一件事是删除功能。记得从我们的初始实现计划中，我们希望用户能够滑动列表中的每个项目，并揭示一个删除按钮。幸运的是，<ion-item>组件有一个叫做<ion-option>的整洁功能。

ion-option-button

<ion-option-button>组件位于<ion-item>组件内部，作为其子组件。它的唯一目的是允许我们定义按钮，当用户从每个<ion-item>组件的右侧滑动时，我们可以揭示这些按钮，就像我们在原始示例截图中的实现一样。为了开始这个实现，复制以下代码并将其粘贴到您的<ion-item>组件标记的结束标签之前：

<ion-option-button class="button-assertive">
     Delete
</ion-option-button>

如果您查看前面的代码，您可以看到<ion-option-button>有一个类属性button-assertive。这也是另一个 Ionic 类，它被用来在 Ionic 按钮上默认定义一个红色按钮。Ionic 有一些内置的类，可以轻松地为元素添加颜色。我们将在本书的后面讨论这个功能，但现在只需知道这个功能即可。

到目前为止，您的<ion-item>组件的最终代码应该看起来与我以下代码块中的内容相似。

<ion-item>

<h2>Bucket List Item</h2>

<ion-option-button class="button-assertive">
         Delete
</ion-option-button>

</ion-item>

您的<ion-content>组件的最终代码应该与以下代码块中的内容非常相似：

<ion-content>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text">
</label>
<button class="button button-small">
              Add
</button>
</div>
</div>

<ion-list>
<ion-item>

<h2>Bucket List Item</h2>

<ion-option-button class="button-assertive">
              Delete
</ion-option-button>

</ion-item>
</ion-list>

</ion-content>

通过这样，我们已经完成了使用<ion-list>组件实现我们的Bucket-List应用程序用户界面的实现。如果您仍然通过ionic serve技术在浏览器中运行应用程序，请尝试从左侧滑动应用程序中的示例列表项。当您这样做时，您应该能够看到一个删除按钮。请参阅以下截图以获取指导：

完成这一步后，我们就完全完成了应用程序的用户界面。现在，是我们开始通过关注我们将要编写的 Angular 代码来连接应用程序的时候了，以确保我们的应用程序按我们的预期工作。

为我们的 Bucket-List 应用程序编写 Angular 代码

在我们开始之前，让我们回顾一下我们想要实现的行为，以便我们的应用程序能够按我们的预期工作。

编写我们的输入框代码

我们首先希望能够在稍后输入一些文本到我们的输入框中。在输入文本后，我们希望点击添加按钮，并将此文本输入到一个数组中，该数组包含所有我们的Bucket-List项目。为了开始这个第一步，我们创建我们的 Angular 控制器，它将包含我们应用程序的所有逻辑。

创建控制器

在您最喜欢的 IDE 中打开应用程序的app.js文件。此文件位于js文件夹中，该文件夹位于应用程序的www文件夹中。

www/js/app.js

应该已经有一个名为starter的文件夹，其中包含与我以下代码块中相似的代码：

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
if(window.cordova&&window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
StatusBar.styleDefault();
    }
  });
})

首先，我们将在声明模块之后创建一个名为BucketListController的控制器。如果你操作正确，你应该有与以下代码相似的代码：

angular.module('starter', ['ionic'])

    .controller('BucketListController', function ($scope) {

    })

.run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
if(window.cordova&&window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
StatusBar.styleDefault();
        }
      });
    })

完成此操作后，我们现在已经完成了创建名为BucketLisController的控制器的过程。这个控制器将包含我们应用的所有逻辑。

创建输入框模型

我们需要创建一个与输入框绑定的模型。这个模型将是一个对象形式，它将保存由我们在输入框中输入的文本所代表的数据。我们将把这个模型称为bucketListItem。为了创建这个模型，只需在之前创建的BucketListController中输入以下代码：

$scope.bucketListItem = {
title : ''
};

上述代码初始化了我们的bucketListItem模型。这个模型有一个名为title的属性，它将保存我们在输入框中输入的文本，在每一个时间点。

创建待办事项列表项的数组

我们应用的目标是有一个“待办事项列表”项的列表。当我们输入这些项目到输入框中时，它们需要存储在一个数组中。我们将创建这个数组，我们将简单地称它为bucketListItems。这个数组是我们将在 Angular 的ng-repeat属性中使用来迭代和渲染在视图中的。为了创建我们的“待办事项列表”项的数组，只需将一个名为bucketListItems的数组附加到你的控制器中的$scope变量上。以下代码展示了这一步骤：

$scope.bucketListItems = [];

实现添加按钮的代码

为了确保我们能够通过输入添加项目到我们的“待办事项列表”应用中，我们需要编写一个函数形式的代码来实现添加按钮。这个按钮负责两件事。首先，它将确保我们输入框中的当前文本被添加到输出框数组中的“待办事项列表”项。其次，它还将清理模型，以确保点击按钮后，输入框为下一个项目清理干净。

下面的代码表示了我们的添加按钮的实现：

$scope.addBucketListItem = function () {
   //Add Current Bucket List Item To The Front Of Our Bucket List Items Array
   $scope.bucketListItems.unshift($scope.bucketListItem);
   //Clear Current Bucket List For Next Entry
   $scope.bucketListItem = {
      title: ''
   };
};

从上述代码中你可以看到，我们创建了一个名为addBucketListItem的函数，并将其附加到我们的控制器中的$scope变量上，以便在视图中使用。在我们的函数中，我们首先将bucketListItem变量的当前值添加到我们的bucketListItems数组中。其次，我们清理bucketListItem变量，以确保它为下一次输入做好准备。

现在，你可以在你的控制器中实现上述代码。

实现删除按钮

我们代码的最后一部分是实现 <ion-option-button> 的 删除 按钮。记住，我们希望这个按钮能够删除它所属的项。以下代码展示了 删除 按钮的实现：

$scope.deleteBucketListItem = function (index) {
$scope.bucketListItems.splice(index, 1);
};

上一段代码简单地展示了我们如何创建一个名为 deleteBucketListItem 的函数。这个函数接受要删除的当前项的索引作为参数。然后它使用这个索引从包含所有 Bucket-List 项的 bucketListItems 数组中移除相应元素。

完成这些后，我们基本上完成了应用程序的代码部分。您的最终控制器应该看起来与我以下代码块中的类似：

controller('BucketListController', function ($scope) {
      $scope.bucketListItem = {
        title : ''
      };

      $scope.bucketListItems = [];

      $scope.addBucketListItem = function () {
        //Add Current Bucket List Item To The Front Of Our Bucket List Items Array
        $scope.bucketListItems.unshift($scope.bucketListItem);
        //Clear Current Bucket List For Next Entry
        $scope.bucketListItem = {
          title: ''
        };
      };

      $scope.deleteBucketListItem = function (index) {
        $scope.bucketListItems.splice(index, 1);
      };

    })

在我们继续测试应用程序之前，我们还有一个最后的步骤要完成。我们需要将我们刚刚创建的所有代码与之前实现的 UI 连接起来，以便它们可以一起工作。

连接所有

控制器准备就绪后，我们现在必须继续将所有代码连接到 UI 上，以便它们能够和谐地一起工作。

绑定控制器

我们需要做的第一件事是将我们创建的控制器连接起来。最简单、最直接的方法是使用 Angular 的 ng-controller 属性指令来指定我们的控制器。在我们的例子中，我们将把控制器连接到应用的 <ion-content> 上。再次打开你应用的 index.html 文件。找到页面的 <ion-content> 标签的起始部分，并指定一个带有控制器名称的 ng-controller 属性。

您的代码应与以下代码非常相似：

<ion-content ng-controller="BucketListController">

这段代码只是告诉 Angular 我们希望在 <ion-content> 元素的范围内使用 BucketListController。这意味着在这个控制器范围内定义的所有方法和属性现在都对 <ion-content> 元素及其所有子元素可用。

绑定输入框模型

下一步是确保我们在控制器中创建的 bucketListItem 变量与视图中的输入框数据绑定。Angular 也有一个简单但很棒的属性指令来完成这个任务，称为 ng-model。我们只需为 ng-model 提供一个与我们要数据绑定的对象或变量匹配的值。在我们的例子中，我们想要将 bucketListItem 变量的标题属性从控制器中数据绑定到输入框。再次提供以下代码供您方便使用：

<input type="text" ng-model="bucketListItem.title">

我们刚刚添加的代码片段告诉 Angular 将此变量绑定到这个输入框。因此，每当视图中的输入值发生变化时，我们控制器中的值与视图中的值相同，反之亦然。

连接添加按钮

添加 按钮是我们实现中的下一个步骤。对于这个按钮，我们只需要告诉它在每次点击时运行我们的 addBucketListItem 函数。Angular 再次提供了一个辅助指令来完成这个任务，即 ng-click 指令。ng-click 指令类似于经典的 Java onClick 事件监听器，你提供给它一个函数，每次连接的元素被点击时都会运行。以下代码演示了如何使用 ng-click 指令连接我们的 添加 按钮：

<button class="button button-small" ng-click="addBucketListItem()">
    Add
</button>

上述代码实现简单地确保当 添加 按钮被点击时，addBucketListener 函数将按照预期行为运行。

绑定 ion-item

我们连接的最后部分是将我们的 bucketListItems 数组连接到我们的 Ion-Item 元素上，同时将 ion-option-button 元素绑定到我们的 deleteBucketListItem() 函数。

使用 ng-repeat 渲染列表

目前我们有一个包含一个硬编码的 ion-item 的示例实现。然而，我们希望有一个更动态的解决方案，其中自动将 bucketListItems 数组中的每个项目渲染为 ion-item。为此实现，我们将使用 Angular 中最重要的功能之一，即 ng-repeat。ng-repeat Angular 指令允许我们动态重复一个数组。

目前，你的代码看起来类似于以下内容：

<ion-item>

<h2>Bucket List Item</h2>

<ion-option-button class="button-assertive">
        Delete
</ion-option-button>

</ion-item>

我们将改变这个实现，使用 Angular 的 ng-repeat 指令。以下代码展示了如何实现这一点：

<ion-item ng-repeat="item in bucketListItems">

<h2>{{item.title}}</h2>

<ion-option-button class="button-assertive">
        Delete
</ion-option-button>

</ion-item>

上述代码现在使用了 Angular 的 ng-repeat 属性。这段代码告诉 Angular 重复 bucketListItems 数组，并将每个项目的标题绑定到一个 HTML <h2> 元素上。

连接 ion-option-button 元素

如果我们不告诉它这样做，ion-option-button 元素仍然保持原样，不会执行任何操作。对于这个元素，我们只需要提供一个函数，当它被点击时执行，就像我们对 添加 按钮所做的那样。为此，我们将再次使用 ng-click 指令，但这次我们将它指向控制器中的 deleteBucketListItem() 函数。以下代码展示了我们如何实现这一点：

<ion-option-button class="button-assertive" ng-click="deleteBucketListItem($index)">
     Delete
</ion-option-button>

从上述代码中，你会注意到一个奇怪的东西，$index 被特别传递给我们的 deleteBucketListItem 函数作为参数。这个变量是一个魔法变量，Angular 的 ng-repeat 指令向我们暴露。它代表 ng-repeat 正在渲染的当前元素的索引。有了这个索引，我们可以了解应该从我们的桶单项目数组中删除哪个特定元素，并删除正确的元素。

在你的 index.html 文件中的最终 <ion-content> 应该与我以下代码块中的内容非常相似：

<ion-content ng-controller="BucketListController">

<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" ng-model="bucketListItem.title">
</label>
<button class="button button-small" ng-click="addBucketListItem()">
              Add
</button>
</div>
</div>

<ion-list>

<ion-item ng-repeat="item in bucketListItems">
<h2>{{item.title}}</h2>

<ion-option-button class="button-assertive" ng-click="deleteBucketListItem($index)">
              Delete
</ion-option-button>

</ion-item>

</ion-list>

</ion-content>

测试我们的桶单应用

我们已经完成了应用程序的实现，现在是时候看到它在实际中的应用了。确保您通过 ionic serve 技术在浏览器中运行您的应用程序，并进行测试。尝试在您的 Bucket-List 应用程序中输入一些内容，如跳伞、水上摩托等。您应该会看到，每次您输入一个条目并点击 添加，该条目就会出现在列表中，输入框也会清空，以便您进行下一次输入。此外，请确保通过从左侧滑动一个条目来测试删除选项，以显示 删除 按钮，并点击它以查看条目消失。

摘要

在本章中，我们从头开始使用 Ionic 空模板创建我们的 Bucket-List 应用程序。我们还学习了如何使用 Ionic 的 <ion-list> 组件及其子元素。我们编写了一些 Angular 代码来连接所有组件并使其运行。<ion-list> 组件是一个非常强大的组件，尽管本章的任务可能看起来比前几章复杂一些，但 <ion-list> 组件仍然让我们能够实现更多强大的功能。有关 <ion-list> 的更多信息，请访问本书附录中提供的链接，以了解更多复杂的功能。

在下一章中，我们将学习如何使用 Ionic 创建侧边菜单应用程序的一些非常有趣的内容。我们还将构建自己的旅游应用程序，并首次使用 Angular 的 $HTTP 服务进行 AJAX 调用。

第五章：伦敦旅游应用

在上一章中，我们创建了一个名为“Bucket-List”的应用，它使我们能够创建一个我们一生中想要做的事情的列表。在本章中，我们将创建一个新的应用，称为“伦敦旅游”应用。这是一个将显示英国伦敦市顶级旅游景点的应用。我们将使用一种名为侧边菜单模板的新类型的 Ionic 模板来构建这个应用。我们还将使用 Angular 的$http服务通过 Ajax 查询我们的数据。

伦敦旅游应用的简介

伦敦是英格兰最大的城市，它是一个广为人知、吸引世界各地游客的城市。这个城市非常现代化，但它有许多历史和非历史性的旅游景点。由于这些景点数量众多，挑选出最佳游览地点可能会有些困难。这正是伦敦旅游应用背后的整个理念，因为它将为用户提供五个精选的目的地，游客在访问伦敦时可以实际参观。这些目的地将存储在我们项目中的一个 JSON 文件中，我们将通过 AJAX 查询并填充。

创建伦敦旅游应用

为了开始创建我们的应用的过程，我们将首先创建一个全新的 Ionic 应用。到目前为止，在这本书中，我们已经学会了使用空白模板创建新的 Ionic 应用。对于我们将要构建的应用，我们将使用一种新的 Ionic 模板来创建应用。我们将使用侧边菜单模板来创建我们的伦敦旅游应用。

侧边菜单应用设计

你可能不熟悉侧边菜单模板的样子。实际上，移动应用中的侧边菜单设计在移动应用开发中非常常见。它涉及到能够从移动应用的左侧或右侧边缘滑动以显示更多选项，通常是更多的菜单选项：

侧边菜单设计技术是在许多环境中使用的，无论是在移动端还是网页上。通常，你会看到一个图标位于右上角或左上角，表明你可以滑动或点击该图标以显示额外的菜单选项。这个图标通常被称为汉堡菜单图标。

事实上，Ionic 框架内置了一个侧边菜单模板，它会自动为我们创建一个带有一些有用样板代码的侧边菜单应用。我们将使用这个模板来创建我们的伦敦旅游应用。

使用 Ionic 侧边菜单模板

为了开始开发我们的伦敦旅游应用，我们将首先使用 Ionic CLI 创建应用。你可以通过在终端窗口中运行以下命令来完成此操作：

注意

我们将把我们的应用名称从伦敦旅游应用缩短为 LTA，以便更容易输入。

ionic start LTA sidemenu

此命令将创建一个名为 LTA 的新 Ionic 应用，并使用默认的 Ionic 侧边菜单模板。

查看 LTA 侧边菜单应用的实际运行情况

一旦你的 LTA 应用创建完成，你只需在终端中将目录切换到 app，然后使用 ionic serve 技巧在你的电脑上运行它。你可以通过运行以下命令来完成：

• 切换到 app 目录：

  cd LTA
  
  

• 使用 ionic serve 技巧运行：

  ionic serve
  
  

  小贴士

  记住使用 Chrome 并使用之前章节中教授的 Chrome 模拟工具来模拟你选择的设备。

你应该会看到一个类似于以下截图的屏幕：

如前一个截图所示，我们刚刚创建的侧边菜单应用包含一些预渲染的内容。

探索 LTA 侧边菜单应用的代码

现在，我们将查看基于侧边菜单模板的 LTA 应用的代码：

现在，我需要你启动你在最喜欢的 IDE 中创建的 LTA 项目。你首先会注意到的是你已经从之前的章节中熟悉的文件夹结构。

index.html 文件

现在，关注 www 文件夹并打开 index.html 文件。查看这个文件应该会显示类似于以下截图的内容：

小贴士

要从根目录导航到这个文件，请导航到 www/index.html。

查看这个文件将展示一些我们在本书之前的项目中看到的内容。例如，你可以看到一些指向 Ionic styles 和 script 文件的 CSS 和 JS 引用。你还会从 body 标签中看到，一个名为 starter 的 Angular 模块正在使用 ng-app 属性被实例化。

仔细关注 <body> 标签内的 <ion-nav-view> 标签。这是一个用于指定整个应用注入到的视图的 Ionic 元素。它类似于 Angular 的 ng-view 功能，但具有更强大的功能。它还自动为我们处理 Ionic 应用内的导航。你不需要再过多关注这部分代码，只需记住 <ion-nav-view> 是所有内容注入的地方，并且像是一个包装器，用于我们应用的内容。

menu.html 文件

我们将要探索的下一个文件是 menu.html 文件。这个文件可能是目前最重要的文件，因为它包含了我们应用侧边菜单部分的大部分生成代码。要查看这个文件，导航到 www 文件夹下的 templates 文件夹中的 menu.html 文件。路径如下：www/templates/menu.html。

如果你已经成功完成，你应该会看到一个与以下截图非常相似的文件：

元素

你首先应该注意到的就是 <ion-side-menus> 元素。把这个元素想象成一个任何侧边菜单应用的容器。它允许我们通过 <ion-side-menu-content> 元素指定主内容区域，也允许我们通过 <ion-side-menu> 元素指定侧菜单。在 <ion-side-menus> 元素内可以指定多个侧菜单，并且我们有能力指定菜单是放置在左侧、右侧，甚至是两侧。有很多酷炫且强大的控制功能，是 <ion-side-menus> 元素让我们能够利用来控制其包含的项目。现在，我们将专注于尝试了解更多关于与 <ion-side-menus> 元素一起工作的子元素。这些是 <ion-side-menu-content> 和 <ion-side-menu> 元素。

<ion-side-menu-content> 元素

这个元素是存放主内容区域或应用可见部分的地方：

在上一张截图，即我们 LTA 应用视图的截图中，你所看到的部分是 <ion-side-menu-content> 的代表。让我们更仔细地查看 <ion-side-menu-content> 的代码，以了解它实际上是怎样详细工作的：

在 <ion-side-menu-content> 内，你可以看到两个直接子元素。

首先，你可以看到 <ion-nav-bar> 元素，它用于构建主内容区域的导航按钮，其子元素为 <ion-nav-buttons>。例如，在这些 <ion-nav-buttons> 元素中，你可以看到第 8-9 行上的一个导航按钮，其 menu-toggle 属性值为 left。这简单地说，当这个按钮被点击时，左侧菜单应该被触发。记住，在一个侧边菜单应用中，最多可以有两侧菜单，一侧在左侧，一侧在右侧。

第二个直接子元素是上一张截图中的第 12 行的 <ion-nav-view> 元素。我们之前在查看 index.html 文件时讨论过这个相同的元素。这个元素是实际内容注入的占位符。这个特定的 <ion-nav-view> 元素有一个 name 属性，其值为 menuContent。这个属性很重要，因为它被用作值来唯一标识 <ion-nav-view>。

说到这里，我们已经简要地触及了 <ion-side-menu-content> 元素及其主要功能。始终将这个元素视为存放侧边菜单应用主内容区域的元素。

<ion-side-menu> 元素

<ion-side-menu> 元素是我们用来指定应用程序侧菜单的元素。就像 <ion-side-menu-content> 元素一样，它作为 <ion-side-menus> 元素的直接子元素存在。在 <ion-side-menus> 元素内部最多可以有两个 <ion-side-menu> 元素，每个侧边只能有一个。让我们更仔细地看看我们 LTA 应用程序中 <ion-side-menu> 的代码。

上一张截图来自我们的 menu.html 文件，展示了 LTA 应用程序中 <ionic-side-menu> 的代码。如果你仔细看，你会注意到我们的 <ion-side-menu> 元素的打开标签有一个值为 left 的 side 属性。这基本上意味着我们想要这个特定的侧菜单位于左侧。记住，我们可以在应用程序中最多有两个侧菜单，一个可以放在左侧，另一个可以放在右侧，但两个侧菜单不能放在同一侧。我们还可以看到这个 <ion-side-menu> 有两个直接子元素。这些子元素是 <ion-header-bar> 和 <ion-content>。<ion-header-bar> 是一个用于构建侧菜单头部的元素。如果你看看我们侧菜单的下一张截图，你应该能看到它的表示：

从上一张截图，你可以看到标题为 LEFT 的头部，正如代码中的 <h1> 元素所反映的那样。

从代码中我们可以看到的第二个子元素是 <ion-content> 元素。把这个元素想象成位于侧菜单头部下方的内容区域。基本上，这包括头部以下的所有内容。<ion-content> 可以包含我们想要的任何 HTML 代码，但在这个例子中，它包含 <ion-list>，这是我们用来从 第四章 “Ionic 组件”构建 Bucket-List 应用程序的部分。你还可以在运行我们的应用程序时的截图上看到这段代码的反映。

话虽如此，你可以看到我们已经简要地了解了 <ion-side-menu> 元素包含的内容以及 Ionic 侧菜单模板是如何工作的。下一步，我们将真正着手构建我们的 LTA 应用程序。

开发 LTA 应用程序

现在我们已经掌握了如何编写我们的 LTA 侧菜单应用程序的代码。记住，我们应用程序的目的是在我们的应用程序中列出一些我们最喜欢的旅游目的地。在正常情况下，我们会从真实的 API 中查询这些数据。但为了简化，我们将通过向一个充当真实数据库的本地 JSON 文件发送请求来模拟这个 API 请求，这个数据库包含我们所需的信息。

本地 JSON 数据库

如前所述，我们将创建一个 JSON 文件，它将像现实生活中的 API 一样包含我们的目的地。这个本地文件将包含伦敦的五个顶级旅游目的地。我们首先需要做的是创建这个文件。

创建本地 JSON 数据库文件

如果你还没有打开你的 LTA 应用程序，请确保你在你喜欢的 IDE 中打开它。现在，前往你的项目www文件夹中创建一个名为sites.json的新 JSON 文件。确保文件以.json扩展名命名，以便它被解析为 JSON 文件。你的目录结构应该类似于以下截图所示：

完成这些后，你已经成功创建了一个代表你的旅游地点数据库的本地 JSON 文件。

填充 JSON 文件

现在我们将用一些数据填充 JSON 文件。这些数据将是伦敦城市中五个顶级旅游景点的数据。以下是一个表示我们本地 JSON 数据库内容的 JSON 数组。你应该将以下代码块的全部内容复制到你的sites.json文件中：

[
  {
"id":"1",
"name":"London Eye",
"description":"Shows you a great view of the city"
  },
  {
"id":"2",
"name":"The Shard",
"description":"Highest building in London"
  },
  {
"id":"3",
"name":"Oxford Circus",
"description":"The place to shop in London"
  },
  {
"id":"4",
"name":"Buckingham Palace",
"description":"The Queen lives here"
  }
]

上一段代码是一个 JSON 数组，它表示伦敦的四个顶级目的地作为 JSON 对象。每个代表一个地点的对象有三个属性。这些属性包括：

• ID：该地点的唯一标识符。

• 名称：旅游景点的名称。

• 描述：关于该地点的一些小信息。

到目前为止，我们已经成功完成了我们 JSON 本地数据库的创建。下一步是看看我们如何实际渲染这些项并查询数据库。

设计视图

我们已经创建了我们的应用程序，并且我们有应用程序的数据。在我们查询数据之前，我们首先需要设计数据在渲染时的外观。为此，我们将求助于我们的老朋友<ion-list>。我们将使用<ion-list>来渲染来自我们的 JSON 数据库的旅游景点的列表。

目前如果我们运行我们的应用程序，我们看到的第一个页面是播放列表应用程序，如以下截图所示：

这是因为默认情况下，页面是通过 Angular 在app.js文件中指定的，作为我们应用的根页面。我们将保持简单，并更改这个播放列表页面的内容，并在其上设计我们的 LTA 应用程序的视图。从你的 LTA 项目文件夹中，导航到www文件夹，然后查看templates文件夹。在templates文件夹中，有一个playlists.html文件。这是包含前面截图所示播放列表页面代码的文件。打开这个文件，你应该会看到一些代码，与以下截图中的代码非常相似：

小贴士

你 LTA 项目根目录下的playlists.html文件将有一个路径www/templates/playlists.html。

我们在这里首先想要做的是更改视图标题的名称。目前，从之前的截图看到的视图标题是Playlists。这是由<ion-view>元素的view-title属性指定的。这个view-title属性当前具有值Playlists。将其更改为London Sites。这是为了确保标题反映了我们应用的使命，即展示伦敦顶级旅游景点。

我们需要做的第二件事是编辑<ion-list>的代码。将<ion-list>代码替换为以下代码块中提供的代码：

<ion-list>
<ion-item ng-repeat="site in sites">
        {{site.name}}
</ion-item>
</ion-list>

如果你已经正确完成，你的代码现在应该非常接近以下截图中的内容：

完成这些后，我们现在已经完成了设计 UI 的过程。下一步是将我们的数据连接到我们的视图中。

连接数据

之前，我们创建了一个sites.json文件，它代表了我们的数据库。我们将对这个文件进行实际的 Ajax 调用以检索其数据并在我们的应用中提供。为了实现这一点，我们首先需要编写检索数据的代码。

使用 $http 服务检索数据

为了检索数据，我们需要向sites.json文件发起一个 Ajax 调用。为此，Angular 提供了一个名为$http的出色服务。这是一个提供通过 Ajax 向本地和远程资源发起调用功能的服务。要开始使用$http服务编写代码，我们首先需要访问与我们的视图关联的控制器。默认情况下，当你基于侧边菜单模板创建一个 Ionic 应用时，视图会有一个控制器与之关联。为了找出哪个控制器与我们的playlist.html文件关联，我们需要查看我们的应用中的app.js文件以发现这一点。

你可以通过导航到项目的www文件夹，然后查看其中的js文件夹来找到app.js文件。你应该能看到app.js文件。打开它。在打开这个app.js文件后，查找看起来与以下截图相似的代码部分：

上一张截图中的代码代表了playlist.html文件的州定义。请仔细关注上一张截图中的代码部分，其中定义了控制器，你会看到那里指定的控制器名为PlaylistsCtrl。这是我们playlist.html文件连接的 Angular 控制器的名称。

下一步是进入这个PlaylistsCtrl控制器，并编写代码来检索我们的数据。默认情况下，控制器包含在可以找到与我们的app.js文件相同的js文件夹中的controller.js文件中。

打开controller.js文件，寻找与我下面截图相似的代码片段：

前面的代码块代表了PlaylistsCtrl的控制器定义。我们首先需要做的是清除控制器内的所有代码。基本上，我们需要删除控制器内找到的所有代码。如果你已经正确地完成了这个步骤，你的控制器现在应该看起来和下面的截图相似：

完成这个步骤后，我们现在可以开始创建使用 Angular $http服务查询我们的本地 JSON 数据库的代码。为了实现这一点，我们首先需要将我们的$http服务的依赖项添加到控制器中。这一步非常重要，如果我们没有正确地添加这个依赖项，我们的应用将无法加载。为此，只需将$http作为控制器定义匿名函数部分的第二个参数添加即可。如果你已经正确地完成了这个步骤，你应该会看到与我下面截图相似的内容：

完成这个步骤后，我们现在可以开始编写代码，从我们的本地数据库中获取数据。要开始这个过程，只需将以下代码写入你的控制器中：

$scope.sites = [];
$http.get('/sites.json')
.then(function (response) {
    $scope.sites = response.data;
});

如果你已经正确地完成了这个步骤，你的代码应该非常接近下面的截图：

在这一点上，我将解释这段代码的作用。我们首先简单地将变量sites初始化为一个数组到$scope。在使用 Angular $scope变量之前总是初始化它们是一个好习惯。接下来，我们尝试使用简写的$http.get()方法进行 Ajax get请求。这个$http.get方法返回一个 promise，所以我们通过使用 Angular 的 promise 处理.then()方法来处理这个 promise。在 promise 处理函数中，你可以看到我们首先设置 promise 响应的数据属性（response.data）。这个 promise 响应的数据属性（response.data）是包含任何返回数据的属性，在我们的例子中是sites.json文件中的数据。

注意

可能有一点让人困惑的是，对于$http.get()函数的第一个参数，它接受 API 的 URL 或我们想要消费的文件，我们提供了以下相对路径'/sites.json'。你可能想知道为什么我们没有正确地给出相对于controller.js文件的路径。这是因为当使用 Angular 时，所有路径都是从根index.html文件引用的。在我们的例子中，sites.json和index.html文件都在www目录下的同一目录中，这就是为什么我们没有'../sites.json'路径，而是有'/sites.json'路径。

完成所有这些后，我们已经完成了创建我们的 LTA 应用程序的过程。现在剩下的只是运行应用程序。继续使用从第一章，“初探 Ionic”中学到的 ionic serve 技巧来运行这个应用程序。确保您从 LTA 应用程序项目的根目录运行此命令。

如果您操作正确，您应该会看到以下截图所示的我们的旅游目的地列表：

摘要

在本章中，我们学习了如何根据侧边菜单模板创建 Ionic 应用程序。我们利用这一知识创建了我们的伦敦旅游应用程序。我们还查看了一个 Ionic 侧边菜单模板的代码，并了解了侧边菜单应用程序的构建块元素。我们通过使用 Angular 的 $http 服务通过 Ajax 查询一些数据并渲染我们的旅游目的地来总结。

在下一章中，我们将扩展我们现有的应用程序，并使用一些更复杂的 Ionic 组件来做一些真正酷的事情。

第六章。高级 Ionic 组件

在本章中，我们将扩展我们在第五章中创建的应用程序，即伦敦旅游应用程序。我们将学习如何将一些更复杂的功能，如 Ionic Popover 和 Ionic Modal 组件，添加到我们的当前应用程序中。在本章结束时，我们将拥有一个弹出菜单和模态窗口作为我们应用程序的一部分。

Ionic Popover

Ionic Popover 组件允许我们在应用程序中添加弹出菜单。弹出菜单是一个上下文菜单，用于提供隐藏菜单或额外菜单选项。它通常在我们空间有限且想要展示选项列表时使用。我们不是拥挤我们有限的可用空间，而是创建某种按钮，当点击时，弹出菜单可以弹出并显示这些菜单项。

以下截图展示了弹出窗口在实际中做什么的很好描述：

实现弹出窗口

我们将在现有的应用程序中实现我们的弹出窗口。你应该做的第一件事是打开你的应用程序，因为你已经在上一章中离开了伦敦旅游应用程序。我们的目标是创建一个包含三个额外选项的弹出窗口列表。这三个选项是关于、帮助和注销。这三个选项不会执行任何操作，因为我们只是为了示例而放置它们。以下截图展示了我们将要实现的目标样本。

• 对于 iOS：

• 对于 Android：

要开始实现我们的弹出窗口，请打开 LTA 应用程序项目中的playlists.html文件。请记住，这个playlists.html文件可以通过导航到www文件夹并在其中查看templates文件夹来找到。路径如下：www/templates/playlists.html。

现在，你应该有一个文件，其代码与以下代码非常相似：

<ion-view view-title="London Sites">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="site in sites">
        {{site.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

添加菜单按钮

我们将要做的第一件事是添加我们想要触发弹出窗口的菜单按钮。当点击时，此菜单将显示弹出窗口。以下代码块表示我们弹出窗口的按钮图标代码：

<ion-nav-buttons side="right">
    <button class="button button-clear icon ion-more"></button>
</ion-nav-buttons>

你需要在playlists.html页面的<ion-view>标签之后复制前面的代码。前面的代码使用<ion-nav-buttons>元素来指定我们想在页眉中放置一个导航按钮。此元素还有一个side属性，其值为right。这个side属性是用来告诉<ion-nav-buttons>元素将自身定位在页面标题的哪一侧。在<ion-nav-buttons>元素中有一个简单的按钮，它具有一些 ionic 样式，确保按钮有一个图标（ion-more）作为我们的弹出视图图标。如果你已经遵循了所有步骤并正确复制了代码块，你的代码应该非常类似于以下代码块：

<ion-view view-title="London Sites">

  <ion-nav-buttons side="right">
    <button class="button button-clear icon ion-more"></button>
  </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="site in sites">
        {{site.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

目前，测试我们的应用程序并查看我们的图标按钮的外观可能是个好主意。使用我们过去使用过的Ionic serve技术，在 Chrome 浏览器上启动你的应用程序。你的屏幕应该看起来接近以下截图中的样子。

提示

如果你在使用 Chrome 上的 Android 模拟器时标题居左，这是完全正常的。iOS 的等效操作也将居中。

编写弹出视图代码

下一步是编写我们的弹出菜单的实际逻辑。首先，我们需要进入我们的controller.js文件。你可以通过从项目根目录查找以下路径来找到此文件：

www/js/controller.js

在controller.js文件中，找到PlaylistsCtrl控制器。我们将在这个控制器中实现我们的弹出视图，因为它与我们的playlists.html相关联。

添加$ionicPopover服务

为了使用 Ionic Popover，Ionic 有一个名为$ionicPopover的特殊服务，这使得操作变得非常简单。通过在PlaylistsCtrl控制器中将$ionicPopover指定为参数来将其添加为依赖项。如果你已经正确完成，你的PlaylistsCtrl控制器现在应该类似于以下代码：

.controller('PlaylistsCtrl', function($scope, $http, $ionicPopover) {
      $scope.sites = [];
      $http.get('/sites.json')
          .then(function (response) {
            $scope.sites = response.data;
          });
})

完成弹出视图代码

下一步是使用$ionicPopover服务编写创建弹出视图的实际代码，如下所示：

$ionicPopover.fromTemplateUrl('templates/popover.html', {
        scope: $scope
      }).then(function(popover) {
        $scope.popover = popover;
      });

      $scope.openPopover = function($event) {
        $scope.popover.show($event);
      };

前面的代码块使用$ionicPopover服务实例化一个新的弹出视图。我们还使用$ionicPopover的.fromTemplateUrl函数来创建弹出视图。此函数允许我们传递一个包含我们的弹出视图 HTML 的文件的 URL。.fromTemplateUrl函数还返回一个 promise，该 promise 返回创建的弹出视图实例。然后我们将此弹出视图实例绑定到我们的作用域，以便在视图中使用。然而，我们还有一个小的部分还没有完成。我们传递了一个文件路径templates/popover.html作为包含我们的弹出视图代码的文件。但是，这个popover.html文件目前不存在，因此我们需要创建它。

创建popover.html文件

要创建我们的 popover.html 文件，在项目的根目录下的 templates 文件夹中创建一个名为 popover.html 的新文件。这个 templates 文件夹位于 www 文件夹中，而 www 文件夹位于项目的根目录。路径如下：www/templates/popover.html。

现在我们已经创建了该文件，下一步就是填充这个文件。记住，我们试图实现的是在 popover.html 中有一个菜单项列表。我们希望这三个选项是 关于、帮助 和 注销，以模拟一组假定的弹出选项。

要开始创建弹出内容，将以下代码块复制到您的 popover.html 文件中：

<ion-popover-view>
    <ion-content>
        <div class="list">
        <b class="item" href="#">
            About
        </b>
        <b class="item" href="#">
            Help
        </b>
        <b class="item" href="#">
            Logout
        </b>
    </div>
    </ion-content>
</ion-popover-view>

如果您已经完成了这个操作，您已经完成了弹出模板的实现。现在，让我们了解我们刚刚在 popover.html 文件上实现的 HTML 代码的作用。<ion-popover-view> 元素是一个表示特定视图是弹出视图的必要元素。它还包含一个 <ion-content> 元素，这是一个容器，用于包含我们视图的所有可见部分，在这种情况下是弹出视图。我们在这个 div 标签中放入一个具有 list 类的标签，这是 Ionic 的内置类之一。在这个 div 内部，有三个 HTML 粗体标签代表我们的三个假选项。这就是我们完成模板实现所需的所有内容。最后一步是将弹出功能连接起来，确保其按预期工作。

弹出功能的连接

这是使弹出功能正常工作的最后一步。请记住，我们在 PlayListsCtrl 控制器中创建了一个名为 openPopover() 的函数，该函数接受一个 $event 参数。当这个函数被调用时，它将启动弹出视图。我们还将必须传递 $event 参数，这是一个保留参数，代表从视图发送的事件。

为了将这个功能付诸实践，我们首先需要将这个 openPopover() 函数连接到我们之前创建的弹出图标点击时执行。这个弹出按钮位于我们之前步骤中的 playlists.html 文件中。您当前的 playlists.html 文件应该看起来接近以下代码块中的内容：

<ion-view view-title="London Sites">

  <ion-nav-buttons side="right">
    <button class="button button-clear icon ion-more"></button>
  </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="site in sites">
        {{site.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

我们需要做的是在创建的弹出图标按钮上添加一个 Ionic 点击事件。我们可以使用 Ionic 提供的属性指令 on-tap 来完成这个操作。这个 on-tap 属性指令接受一个函数，当包含的元素被点击时，该函数将被执行。在我们的例子中，我们希望这个函数是 openPopover 函数。目前我们的弹出图标按钮代码如下所示：

<ion-nav-buttons side="right">
    <button class="button button-clear icon ion-more"></button>
  </ion-nav-buttons>

现在，<button> 的 on-tap ionic 属性指令的代码如下所示：

on-tap="openPopover($event)"

您可以看到 $event 被作为参数传递。请记住，这非常重要，必须严格按照这种方式传递。您最终的 playlists.html 代码将如下所示：

<ion-view view-title="London Sites">

  <ion-nav-buttons side="right">
    <button class="button button-clear icon ion-more" on- tap="openPopover($event)"></button>
  </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="site in sites">
        {{site.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

完成这些操作后，我们已经完全完成了弹出功能的实现。现在，我们可以使用 ionic serve 技术在浏览器中运行它，以查看其外观。

如果您使用ionic serve技术正确运行了您的应用程序，当您点击弹出图标按钮时，您应该看到以下截图所示的内容。视图将根据您是否使用 Android 或 iOS 模拟器设置进行测试而有所不同：

弹出菜单是一个很好的上下文菜单工具，用于添加额外的菜单选项。它还有一个根据显示的移动操作系统自动显示不同版本的功能。现在我们已经学会了如何使用 Ionic Popover，让我们学习如何使用 Ionic Modal。

Ionic Modal

Ionic Modal 是 Ionic 提供的一个组件功能，用于在我们的应用程序中创建模态窗口。模态窗口是一个弹出在现有页面上的视图，而不会丢失当前操作上下文。一旦它被取消，之前的视图状态就会恢复。这是一个收集额外信息或在屏幕上显示某些内容而不丢失当前状态的好工具。

创建模态

Ionic 通过一个名为$ionicModal的服务公开模态功能。此服务为我们提供了一种在应用程序中创建模态的方法。在我们开始实现模态之前，让我们了解我们希望通过应用程序中的模态功能实现什么。

我们将继续使用我们的 LTA 应用程序并添加一个模态。我们希望这个模态模仿应用程序的示例关于页面，其中将包含一些关于应用程序的详细信息。记住，我们已经有了一个来自我们之前创建的弹出按钮的按钮，上面标有关于文本。我们将把这个弹出项连接起来，以便在点击时简单地打开模态。

实现模态

要开始实现模式，请打开您的controller.js文件并定位到PlaylistsCtrl控制器。首先要做的是在PlaylistsCtrl控制器上添加对$ionicModal服务的依赖。这是通过将$ionicModal作为PlaylistsCtrl控制器函数定义的参数来完成的。正确执行此操作后，您的PlaylistsCtrl控制器应该看起来像以下代码块中的内容：

.controller('PlaylistsCtrl', function($scope, $http, $ionicPopover, $ionicModal) {
      $scope.sites = [];
      $http.get('/sites.json')
          .then(function (response) {
            $scope.sites = response.data;
          });

      $ionicPopover.fromTemplateUrl('templates/popover.html', {
        scope: $scope
      }).then(function(popover) {
        $scope.popover = popover;
      });

      $scope.openPopover = function($event) {
        $scope.popover.show($event);
      };
})

接下来，我们将要在PlaylistsCtrl控制器中编写我们的模态代码。以下代码表示我们的模态代码：

$ionicModal.fromTemplateUrl('templates/modal.html', {
            scope: $scope
        }).then(function(modal) {
            $scope.modal = modal;
        });
        $scope.openModal = function() {
            $scope.modal.show();
        };
        $scope.closeModal = function() {
            $scope.modal.hide();
        };

将前面的代码复制到您的PlaylistsCtrl控制器中。如果您正确执行了此操作，您的PlaylistsCtrl控制器的代码块应该看起来像以下内容：

.controller('PlaylistsCtrl', function($scope, $http, $ionicPopover, $ionicModal) {
        $ionicModal.fromTemplateUrl('templates/modal.html', {
            scope: $scope
        }).then(function(modal) {
            $scope.modal = modal;
        });

        $scope.openModal = function() {
            $scope.modal.show();
        };

        $scope.closeModal = function() {
            $scope.modal.hide();
        };

        $scope.sites = [];
        $http.get('/sites.json')
          .then(function (response) {
            $scope.sites = response.data;
          });

        $ionicPopover.fromTemplateUrl('templates/popover.html', {
        scope: $scope
        }).then(function(popover) {
        $scope.popover = popover;
        });

        $scope.openPopover = function($event) {
        $scope.popover.show($event);
        };
    })

现在，让我们理解一下模态代码的作用。我们使用了 $ionicModal 服务通过其 .fromTemplateUrl() 方法创建模态。这个方法接受两个参数；第一个是包含模态的 HTML 文件的路径，第二个是一个 options 对象。这个 options 对象让我们可以自定义模态，并提供给我们自定义诸如使用哪种动画等事物的途径。目前，我们只指定了模态应该使用的范围，在这个例子中是控制器的范围。

.fromTemplateUrl 方法返回一个包含创建的模态的承诺，我们将它设置到 $scope 上。以下代码是模态创建的反映：

$ionicModal.fromTemplateUrl('templates/modal.html', {
            scope: $scope
        }).then(function(modal) {
            $scope.modal = modal;
        });

我们还创建了两个函数。这些函数是 .openModal() 和 .closeModal()。openModal() 函数绑定到 $scope，它所做的只是使用创建的模态的 .show() 方法。.closeModal() 函数通过实现创建的模态的 .hide() 方法来做相反的操作。我们还没有做的事情是创建我们传递的 HTML 模板，在这个例子中是 modal.html。

创建 modal.html 文件

导航到你的 templates 文件夹，创建一个名为 modal.html 的新 HTML 文件。以下代码代表我们的模态模板文件，你需要将此代码复制到你的 modal.html 文件中：

<ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">About The App</h1>
        <button class="button button-clear button-primary" on- tap="closeModal()">Cancel</button>
    </ion-header-bar>

    <ion-content class="padding">
        The LTA app is part of the Ionic By Example book written by Sani Yusuf.
    </ion-content>
</ion-modal-view>

如果你仔细查看这段代码，你可以看到 <ion-modal-view> 元素作为代码的根元素。这个 <ion-modal-view> 元素是任何模态模板的根元素。我们还可以看到我们有一个 <ion-header-bar> 元素，这个元素有一个 <h1> 元素用来声明模态标题。还有一个 <button> 元素，它有一个 on-tap 属性，指向我们之前创建的 closeModal() 函数。

还有一个 <ion-content> 元素，用于包含模态的可见主体部分。有一些占位文本来模拟 LTA 应用程序的 关于 页面，但你可以自由添加一些自己的 HTML 文本。我们需要做的最后一步是将我们的弹出按钮连接到我们的模态。

连接模态

要连接我们的模态，请记住我们希望当点击时，关于 弹出菜单项可以打开模态。首先，打开你的项目中的 popover.html 文件。你目前有的内容如下：

<ion-popover-view>
    <ion-content>
      <div class="list">
        <b class="item">
            About
        </b>
        <b class="item">
            Help
        </b>
        <b class="item">
            Logout
        </b>
      </div>
    </ion-content>
</ion-popover-view>

我们需要做的只是使用 Ionic 的 on-tap 属性在 About 条目上引用 openModal() 函数。正确地这样做会使我们的弹出代码看起来如下：

<ion-popover-view>
    <ion-content>
        <div class="list">
        <b class="item" on-tap="openModal()">
            About
        </b>
        <b class="item">
            Help
        </b>
        <b class="item">
            Logout
        </b>
    </div>
    </ion-content>
</ion-popover-view>

完成这些后，我们已经完成了模态窗口的实现。接下来要做的事情是进行测试。为此，使用 Ionic serve 技术运行你的应用程序。当你的应用程序在浏览器中运行时，点击弹出图标并选择 关于 选项。这应该会弹出一个类似于以下截图中的模态窗口：

摘要

在本章中，我们使用了 Ionic 的两个非常重要的特性，并学会了创建弹出窗口和模态窗口。我们仍然使用了上一章中的 LTA 应用程序。Ionic 弹出窗口是一个很棒的功能，用于添加额外的菜单项或提供上下文菜单选项。我们还了解了 Ionic 模态窗口，它用于在保持上下文的同时，提供对应用中另一个视图的查看。

在下一章中，我们将学习如何使用 Ionic 的一些自定义技术，以及如何自定义我们的 Ionic 应用程序。

第七章. 自定义应用

在上一章中，我们深入探讨了 Ionic 的一些更高级的功能，如弹出和模态功能。在本章中，我们将专注于自定义 Ionic 应用。Ionic SDK 默认附带一些优秀的工具，这些工具使得自定义应用程序以适应您品牌的视觉指南变得容易。这得益于其内置的 Gulp 集成，用于构建过程的需求，以及 SCSS 用于 CSS 预处理。

Ionic 还有一个特殊的 Angular 提供者，称为 $ionicConfigProvider。这个提供者可以用来进行大量的配置和自定义，例如指定应用程序应使用哪种类型的动画，甚至更高级的功能，如指定您想要在缓存中保留多少缓存项。$ionicConfigProvider 还允许您在全局级别或按平台基础指定这些配置。

自定义应用的视觉和感觉

当您使用其中一个 Ionic 模板创建 Ionic 应用程序时，您现在应该已经注意到它附带了一些内置的默认 CSS 样式。很多时候，您会想知道如何在保留一些内置的 Ionic 样式的同时添加您自己的颜色和样式。

使用 SASS 的 Ionic 样式

这是由 Ionic 团队深思熟虑的结果，因此他们实际上使用 SCSS 创建了所有他们的 CSS 样式。SCSS 是基于 SASS 的一个独立技术，它允许您以面向对象的方式编写 CSS，然后将其编译成 CSS。SCSS 是编写 CSS 规则的一种非常酷的方式，因为它允许我们创建变量并使用它们来创建样式表。如果您对 SCSS 完全陌生，并且想了解一些关于 SCSS 的简要信息，请随时访问 sass-lang.com。

现在，让我们再次查看 Ionic 项目的文件夹结构，同时考虑到使用 SCSS 自定义样式。

Ionic SCSS 概览

为了了解 Ionic 的 SCSS 结构概览，我们将创建一个全新的应用程序，使用 Ionic 空模板。我们将把这个应用程序称为 custom-app。以下创建这个新应用程序的命令。在您的计算机上打开一个终端窗口，切换到您选择的目录，并运行以下命令：

ionic start custom-app blank

在您创建了新的 custom-app 应用程序之后，在您最喜欢的 IDE 中打开这个新项目，以了解文件夹结构概览。您应该看到以下截图中的内容：

有两个文件夹您应该特别注意。第一个文件夹是位于项目根目录中的 scss 文件夹。这个文件夹中有一个名为 ionic.app.scss 的文件；我们将更详细地查看这个文件。以下是这个文件夹的截图：

第二个文件夹也命名为 scss，但您可以通过从根文件夹 www/lib/ionic/scss 导航到以下路径来找到此文件夹。

以下截图显示了此文件夹：

现在，如果您进一步查看这个第二个 scss 文件夹，您应该会看到一些与以下截图相似的内容，其中包含 scss 文件夹中的多个 SCSS 文件：

此 scss 文件夹包含大量文件，您可能会想知道这些文件是做什么用的。作为本书的一部分，您不需要理解这些文件整个过程的全部内容，但您需要知道它们是包含每个 Ionic 元素 SCSS 代码的文件。整个 Ionic CSS 样式表是通过编译这些 SCSS 文件生成的。您可以选择进入这些文件以更改任何 SCSS 文件，但这可能不是一个好主意，因为您可能会破坏 SCSS 代码中的任何依赖项。因此，Ionic 提供了一种更简单的方法来实现这一点，这得益于我们之前简要提到的 ionic.app.scss，现在我们将对其进行详细探讨。

ionic.app.scss 文件

ionic.app.scss 文件可以在项目根目录下的 scss 目录中找到，如下面的截图所示：

此文件是自定义您的 Ionic 应用样式最重要的文件。将此文件视为一个接口，可以覆盖 www/lib/ionic/scss 路径中包含的任何 SCSS 文件中的任何 SCSS 样式。如果您现在查看此 ionic.app.scss 文件，它应该看起来像以下代码中的内容：

/*
To customize the look and feel of Ionic, you can override the variables in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicon's font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

从前面的代码中，您甚至可以看到一些注释，告诉您如何使用此文件来覆盖您的 SCSS 样式。现在，在我们开始学习如何实际覆盖这些文件之前，首先让我们学习如何为我们的项目设置 SCSS。

设置 SCSS

在我们设置 SCSS 之前，我们首先简要地看看我们的 CSS 目前是如何集成的。当您创建一个新的 Ionic 项目时，项目默认使用两个来源的样式。

第一个来源是位于路径 lib/ionic/css/ionic.css 的 ionic.css 文件。此文件包含所有 Ionic 默认样式的已编译 CSS 代码。它只是对项目根目录相对路径 www/lib/ionic/scss/ionic 目录中找到的所有 SCSS 文件进行 CSS 编译。

第二个来源是位于项目根目录相对路径 css/style.css 的 style.css 文件。在您创建项目时，此文件通常是空的，并且是一个可以输入您自己的自定义 CSS 的地方，如果您不想使用 SCSS。查看以下截图中的 index.html 文件显示了这两个文件如何默认作为 CSS 样式表被引用：

解释到这里，我们将继续在我们的 Ionic 应用程序上设置 SCSS。

传统的设置 SCSS 可能相当具有挑战性，但 Ionic 内置了一些工具，使得这个过程变得简单。要开始设置你项目中的 SCSS，打开一个终端窗口，并简单地通过运行cd custom-app命令进入你项目的根目录。

下一步是在你的电脑上安装bower，如果你还没有安装的话。你可以通过运行以下命令来完成：

npm install bower –g

注意

如果你使用的是 Linux 或 Mac 电脑，你可能需要为sudo命令添加前缀。这将变为sudo npm install bower –g。

然后，设置 SCSS 的最后一步是通过运行以下命令来完成的：

ionic setup sass

这个命令会在幕后完成所有必要的操作，使你的项目能够与 SCSS 一起工作。完成这个命令后，你会在项目的根目录中注意到一个新的文件夹，名为node-modules文件夹。这是完全正常的，这个文件夹包含了使你的项目能够与 SCSS 一起工作的所有包。

到目前为止，我们已经成功地为我们的项目设置了 SCSS。你应该首先查看你的index.html文件。你的index.html应该类似于以下代码块：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum- scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="img/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="img/cordova.js"></script>

    <!-- your app's js -->
    <script src="img/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>
</html>

在页眉中，你首先会注意到与之前简短讨论的内容相比，对 CSS 文件的引用已经发生了变化。现在，在index.html的<head>部分只有一个 CSS 引用指向css/ionic.app.css。你可能想知道这是怎么发生的。好吧，基本上，当你像我们在本章中到目前为止所做的那样设置 SCSS 时，Ionic 会自动设置 SCSS 来编译所有的 SCSS 并将它们输出到ionic.app.css。

如果你导航到www/css路径，你会看到我们现在有三个文件，而不是之前看到的那个。你会看到一个ionic.app.css文件和一个ionic.app.min.css文件。这两个文件是相同的，其中ionic.app.min.css是ionic.app.css的压缩版本。它们是我们之前检查出的所有 SCSS 文件的输出，编译成一个文件。在幕后还有许多其他事情发生以确保 SCSS 编译能够完成，但为了简单起见，我们不会在本章深入探讨这一点。

自定义 SCSS

要开始自定义我们的应用程序，你首先想要做的是使用本书前几章中学到的ionic serve技术运行你的应用程序，使用以下命令：

ionic serve

这应该会弹出一个在浏览器中运行的应用程序，你应该看到的东西与我们以下截图中的非常相似：

注意

确保你从现在开始不要关闭你的终端或终止 serve 会话，以便遵循即将到来的说明。

现在来解释我们将尝试做什么，首先让我们看看这个应用头部代码。代码块是应用的代码，你可以在项目的www文件夹中的index.html文件中找到这个代码块：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum- scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="img/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="img/cordova.js"></script>

    <!-- your app's js -->
    <script src="img/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>
</html>

仔细注意代表前面代码块主要视图部分的代码片段，它也在以下代码块中表示：

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>

如果你查看开头的<ion-header>标签，你会看到它有一个名为bar-stable的类。这是一个 Ionic 内置的类，它给标题带来了一种类似浅灰色的颜色，就像我们在之前查看的截图中所看到的那样。

假设我们想要自定义这个标题以适应我们的品牌颜色，比如说，我们的品牌颜色和这个品牌恰好是我的最喜欢的红色色调，其十六进制代码为#D71300。

现在，你可能想进入ionic.app.css文件，查找 CSS 样式表中所有这个样式的出现，并更改它。但请记住，这个ionic.app.css是基于我们的 SCSS 文件生成的。Ionic 通过ionic.app.scss文件为我们提供了一个很好的方法来用 SCSS 覆盖默认样式，这个文件可以在scss目录中找到。我们之前已经看过这个文件，现在我们再次查看它：

/*
To customize the look and feel of Ionic, you can override the variables in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

前面的代码块类似于你目前在ionic.app.scss文件中拥有的内容。为了覆盖标题的颜色，我们将覆盖我们 SCSS 中的$stable变量的当前颜色。

这个代码如下所示：

$stable: #D71300;

你应该在以下代码块的最后一行之前任何地方复制前面的代码：

@import "www/lib/ionic/scss/ionic";

现在，你的最终代码应该类似于以下内容：

/*
To customize the look and feel of Ionic, you can override the variables in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

$stable: #D71300;

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

完成这些后，保存ionic.app.scss文件。通过这样做，你就完成了覆盖应用的过程，现在你的标题应该是红色的。如果你没有在浏览器中打开你的应用，或者没有运行ionic serve命令，请回到你的应用，你应该会看到以下截图中的类似内容：

你现在可以看到，标题现在采用了我们在ionic.app.scss文件中提供的十六进制代码的颜色。我们可以用这个文件覆盖任何默认文件。你所需做的只是浏览一下lib/ionic/scss文件夹，识别出你想要覆盖的 SCSS 规则，然后在ionic.app.scss中进行覆盖。

完成这些后，我们就完成了学习如何覆盖和设置我们的 Ionic 应用 SCSS 的过程。下一步是学习关于$ionicConfigProvider的内容。

$ionicConfigProvider

$ionicConfigProvider是一个 Ionic 公开的提供者，它允许我们进行一些非常强大的配置。我们不会为这个写任何代码，因为它是一个高级特性，但你应该对其存在有很好的了解。

$ionicConfigProvider允许你做的某些功能包括以下内容：

• 指定你应用的过渡类型

• 设置最大缓存

• 启用/禁用动画

• 启用/启用原生滚动

• 指定标签位置

这些以及更多功能都是 $ionicConfigProvider 允许你调整的。记住，这个功能是一个相当高级的功能，并且很可能在不使用它的情况下完全设计你的应用。大多数应用可能不会使用它的功能，但如果你发现自己需要使用它，你可以访问 $ionicConfigProvider 的官方文档，查看其在 ionicframework.com/docs/api/provider/$ionicConfigProvider/ 上的全部潜力。

摘要

在本章中，我们学习了如何通过为我们的 Ionic 应用设置 SCSS 来自定义我们的应用。我们还简要地了解了 $ionicConfigProvider 并看到了它的一些精彩功能。在下一章中，我们将学习如何根据标签模板创建新的类型 Ionic 应用。

第八章：构建简单的社交应用

在本章中，我们将专注于学习如何使用 Ionic 标签模板创建具有标签的 Ionic 应用。我们还将查看构成标签模板的一些内容，并学习如何将其添加到其中。

Ionic 标签应用

标签是移动应用中非常常见的菜单系统。它们为用户提供了一种简单而有效的方式，在应用中创建类似应用内应用的自独立视图。

上述截图是示例 Ionic 标签应用的视图。标签菜单系统提供的一个非常棒的功能是能够在每个单独的标签菜单中保持独立上下文。无论您在应用中的哪个位置，您都可以在任何时候切换到另一个标签。标签菜单还提供了导航历史记录功能。您可以在每个标签内导航到不同的视图，并且在您在任意标签菜单之间切换时不会丢失这个导航历史记录。现在我们已经对标签应用包含的内容有了清晰的认识，让我们继续创建一个新的标签应用，并详细查看其工作方式。

创建 Ionic 标签应用

创建一个 Ionic 标签应用与我们在本书前几章中创建侧边菜单和空白 Ionic 应用并没有太大的不同。我们将创建一个新的 Ionic 标签应用，并将其命名为 tabs-app。要创建这个新应用，请打开一个终端窗口并运行以下命令：

ionic start tabs-app tabs

使用前面的命令，您将成功创建 tabs-app ionic 应用。接下来，我们将对刚刚创建的应用进行概述。为此，只需在您最喜欢的 IDE 中打开 tabs-app 项目。您应该有一个类似于以下截图所示的项目文件夹结构：

运行 tabs-app 应用

现在我们已经创建了我们的应用，让我们来看看它的实际运行情况。为此，请在您的计算机上打开一个终端窗口，并使用 ionic serve 技巧运行您的应用。

提示

确保您位于项目文件夹内，通过运行 cd tabs-app。要使用 ionic serve 技巧运行您的应用，请在终端中运行 ionic serve 命令。

您应该看到一个有三个标签的应用，其外观类似于以下截图。

• 对于 iOS：

• 对于 Android：

tabs-app 应用概述

要开始理解我们的 tabs-app Ionic 标签应用的生命周期，我们首先需要查看我们应用的入口模块。我们的入口模块通常通过 ng-app 指令在应用的 index.html 文件中指定。

注意

index.html 文件位于你的应用程序的 www 目录中。

通过查看你的 index.html 文件，你会发现一个文件，这与以下屏幕截图中的内容非常相似：

你会看到一个名为 starter 的 Angular 模块，它通过页面的 <body> 标签上的 ng-app 指令指定。这可以在前面的屏幕截图中看到高亮显示。这个 starter 模块通常位于我们的 app.js 文件中，我们将深入研究它以更深入地理解该模块。

注意

app.js 文件位于你的项目的 www/js 路径中。

打开你的 app.js 文件，并密切注意配置你的路由的 .config() 函数。特别注意名为 tab 的第一个路由定义。这个路由定义在下面的屏幕截图中表示：

这个 tab 状态是一个抽象状态。在 Angular 中，一个抽象状态是一个你不能直接导航到的状态，但它可以包含可以被导航到的子状态。这是一种为你的状态创建某种层次结构的好方法。

根据前面屏幕截图中高亮的 tabs 状态定义，你可以看到它引用了 templateUrl 到位于 templates/template.html 目录中的 tabs.html 文件。为了理解 Ionic 如何与标签页一起工作，让我们来探索 tabs.html 文件。

tabs.html 文件概览

当你打开你的 tabs.html 文件时，你会看到一些内容，这与我在以下屏幕截图中的内容非常相似：

你会清楚地看到整个标记都被 <ion-tabs> 元素包裹。这个 <ion-tabs> 元素是像容器一样作用于你声明在 Ionic 标签应用中的标签页的根元素。你会看到打开的 <ion-tabs> 标签还有一个带有一些内置 Ionic CSS 类的 class 属性。这是因为 <ion-tabs> 元素就像其他任何元素一样，并服从某些 CSS 样式。

<ion-tab> 元素

在 <ion-tabs> 元素内部，你会看到三个不同的 <ion-tab> 元素。<ion-tab> 元素是用来创建标签页的元素，并且必须是 <ion-tabs> 元素的子元素。你会注意到每个 <ion-tab> 元素都有一些属性。title 属性用于指定特定标签页将显示的标题。icon-on 和 icon-off 是用于定义当标签页处于焦点和未焦点状态时显示哪些图标的属性。最后，href 属性用于提供当选择特定标签页时应导航到的路由路径。

注意

<ion-tab> 元素有更多可用于不同自定义和操作的属性，这些都在官方 Ionic 文档页面上有详细说明。

在每个 <ion-tab> 元素中，你将找到一个 <ion-nav-view> 声明。<ion-nav-view> 是一个用于引用 Angular 视图的元素。如果你仔细观察，你会看到 <ion-nav-view> 元素有一个 name 属性，它有值。这个 name 属性用于指定在 app.js 文件中定义的特定视图的名称。如果你再次查看 app.js 文件，就像我们在本章前面做的那样，你会看到一些状态有视图定义。以下截图显示了 tab.dash 状态的清晰演示：

你可以看到，在 views 对象中有一个名为 tab-dash 的视图，并且这个 tab-dash 视图也有一个 templateUrl 定义以及一个类似于正常状态定义的 controller 定义。这就是 Ionic 提供的层次结构，使得每个标签都可以有一个独立的 <ion-nav-view>，其中视图被放置。为了更好地理解这个标签系统是如何工作的，我们将在我们的应用程序中添加另一个标签。

将标签添加到 tabs-app 应用程序

我们将添加一个新标签页，它将包含一个功能，允许用户发布消息，就像留言板一样，并看到它看起来类似于 Facebook 墙或 Twitter 墙。我们将把这个新标签页称为 wall 标签。要添加这个新标签，我们首先需要为我们的新标签添加路由。

添加新标签页的状态

要为我们的新标签页添加状态，我们需要在定义所有默认标签路由的 app.js 文件中定义此标签。在 app.js 文件中找到的 .config() 函数内，在标签抽象状态的 state 定义之后放置以下代码块：

.state('tab.wall', {
    url: '/wall',
    views: {
      'tab-wall': {
        templateUrl: 'templates/tab-wall.html',
        controller: 'WallController'
      }
    }
  })

如果你已经正确完成，你的 app.js 文件的 .config() 函数的部分应该看起来像这样：

让我们尝试理解我们刚才做了什么。我们创建了一个名为 tab.wall 的新状态，它有一个 /tab 路由。这意味着我们能够作为我们的 Angular 应用程序的一部分导航到这个 tab.wall 状态或 /tab 路由。我们还创建了一个名为 tab-wall 的新视图，在本章的后面，我们将使用这个 tab-wall 视图来引用它，作为我们新创建的标签内容显示的地方。

如果你仔细查看我们的新状态定义，你会看到我们引用了一个 templateUrl 到路径为 templates/tab-wall.html 的文件和一个控制器 WallController，这两个我们还没有创建。我们需要创建这个 tab-wall.html 文件，并创建 WallController 控制器。

创建 tab-wall.html 文件

要正确创建 tab-wall.html 文件，我们需要确保我们在 templates 目录中创建它，以便它与我们在声明状态定义时传递的 templates/tab-wall.html 目录相匹配。

在你的 templates 文件夹中创建一个名为 tab-wall.html 的文件。如果你操作正确，你的 templates 目录应该看起来与以下截图中的非常相似：

下一步是实际填充新创建的 tab-wall.html 文件。将以下代码块中的代码放入你的 tab-wall.html 文件中：

<ion-view view-title="Wall">
  <ion-content class="padding">

    <div class="list">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="enter your message">
        </label>
        <button class="button button-small">
          Post
        </button>
      </div>
    </div>

    <div class="card">
      <div class="item item-text-wrap">
        This Is A Sample Message Post
      </div>
    </div>

  </ion-content>
</ion-view>

如果你操作正确，你的 tab-wall.html 应该看起来如下截图所示：

下一步是创建我们在状态定义中定义的控制器。

创建 WallController 控制器

要创建 WallController 控制器，首先我们需要打开 controller.js 文件。这个文件可以在与我们的 app.js 文件相同的文件夹中找到，即 JS 文件夹。你的 controller.js 文件应该与以下截图中的非常相似：

要创建 WallController 文件，只需将以下代码块中找到的代码放置在可以找到代码行的第一行之后，即 angular.module('starter.controllers', []) 这行代码之后：

.controller('WallController', function($scope) {

  })

如果你正确复制了此代码，你的 controller.js 文件应该与以下截图非常相似：

通过这样做，我们已经成功创建了 WallController 控制器。然而，我们还需要完成最后一步来实现我们新标签页的实现。我们需要实际创建标签页本身，使用 <ion-tab> 元素。

创建标签页

要创建我们的标签页，我们需要重新访问 tabs.html 文件。在文件中，找到开头的 <ion-tabs> 标签，并在其后放置以下代码块中提到的代码：

<!-- Wall Tab -->
  <ion-tab title="Wall" icon-off="ion-ios-compose-outline" icon- on="ion-ios-compose" href="#/tab/wall">
    <ion-nav-view name="tab-wall"></ion-nav-view>
  </ion-tab>

如果你操作正确，你的 tabs.html 文件应该看起来如下截图所示：

通过这样做，我们在应用程序中成功创建了一个新的标签页。让我们回顾一下我们是如何实现这一壮举的。首先，我们为我们的标签创建了一个新的状态定义，并引用了控制器和模板文件。然后我们继续创建标签本身，如前一个截图所示，使用 <ion-tab> 元素。

如果你查看前面的截图并仔细注意我们刚刚从代码块中复制的 <ion-tab>，你会看到它的 <ion-nav-view> 子元素有一个值为 tab-wall 的 name 属性。这仅仅是指我们在 app.js 文件中定义 tab.wall 状态时定义的视图。这些步骤完成了我们的标签实现。

现在，下一步是运行我们的应用并看到它的实际效果。为此，只需使用ionic serve技术运行您的应用程序。

注意

要使用ionic serve技术运行您的应用，只需从tab-app应用程序的根目录运行ionic serve。

如果您操作正确，您应该看到一些与以下截图非常相似的内容。

• 对于 iOS：

• 对于 Android：

摘要

在本章中，我们学习了 Ionic 标签应用模板。我们还创建了一个名为tabs-app的标签应用，甚至添加了我们自己的新标签。在下一章中，我们将使用这个相同的应用程序来学习如何使用 Firebase 为我们的应用程序添加后端服务。

第九章。连接到 Firebase

在本章中，我们将专注于学习如何使用 Firebase 将后端集成到我们的 Ionic 应用程序中。Firebase 是一种实时数据存储技术，它使用 JSON 风格的数据库结构，让您能够将数据存储在云端。我们还将使用在第八章中创建的tabs-app应用程序，即Building a Simple Social App，来学习如何将 Firebase 集成到我们的应用程序中。

扩展我们的 tabs-app Ionic 应用程序

在第八章 Building a Simple Social App 中，我们创建了tabs-app。如果您记得正确，我们添加了一个名为walls的新标签页。

我们为新增的wall标签页所持有的基本想法是，它将像一块公告板，用户可以在其中输入帖子，然后点击标有发布的按钮，在公告板上查看帖子，如下面的截图所示：

我们需要做的第一件事是实现允许用户发布的功能，因为目前我们的tab-app应用程序中还没有这个功能。

实现帖子墙功能

为了回顾我们对wall标签页的需求，我们希望能够在消息框中输入消息，就像前面截图所示，并且消息能够像示例消息帖子一样显示。首先，我们从在我们的控制器中实现添加帖子的代码开始。

以下代码块提供了这段代码：

$scope.post = {
      message : ''
    };

    $scope.posts = [];

    $scope.addPost = function () {
      $scope.posts.unshift($scope.post);

      $scope.post = {
        message: ''
      };
    };

您需要在您的WallController控制器中复制前面代码块中提供的代码。这个WallController控制器位于您的tabs-app应用程序的controller.js文件中。WallController控制器可以在路径www/js/controller.js中找到。

如果您操作正确，您的WallController控制器将看起来如下面的截图所示：

让我们了解这段代码的作用。我们只是将一个post对象附加到控制器上。我们还声明了一个posts数组，所有帖子都将存储在这个数组中。

最后，我们有一个名为addPost()的函数，每次它被触发时，都会将一个新的帖子添加到posts数组中。

下一步是将这个控制器连接到我们的Wall标签页的视图。这个视图的标记位于tab-wall.html文件中。现在，这个文件看起来如下面的截图所示：

您需要完全替换<ion-content>中找到的标记，使用以下代码块中提供的标记：

<div class="list">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="enter your message" ng-model="post.message">
        </label>
        <button class="button button-small" on-tap="addPost()">
          Post
        </button>
      </div>
    </div>

    <div class="card" ng-repeat="post in posts">
      <div class="item item-text-wrap">
        {{post.message}}
      </div>
    </div>

如果您操作正确，您的tab-wall.html文件将有一个如下截图所示的标记：

通过这样做，我们已经完成了在“墙”标签页上实现和布线我们的墙帖子功能的流程。下一步是使用ionic serve技术进行测试。使用ionic serve技术运行你的应用，你应该会在浏览器中看到你的应用正在运行。

如果你尝试在“墙”标签页中的文本框中添加消息并点击发布按钮，你将看到一条消息出现，就像我们在以下屏幕截图中所看到的那样：

后端挑战

我们当前应用程序遇到的一个问题或挑战是它不具备持久性。通过这种方式，我们的意思是，一旦我们刷新浏览器，所有我们的数据都会消失，我们必须重新开始。如果我们可以输入一个帖子，当我们再次访问我们的应用时，我们可以从我们离开的地方继续，就像在其他应用中的每个消息板一样，那会多么酷啊？嗯，我们可以通过一个叫做 Firebase 的伟大技术来实现这一点。我们首先要做的是尝试理解 Firebase 以及它究竟是什么。

Firebase

在我们开始这一章之前，非常重要的一点是我们必须理解我们将要用来集成后端的技术。这个技术被称为 Firebase。Firebase 是一种让我们能够存储实时数据的技术。与需要运行服务器的传统后端数据库不同，你不需要使用 Firebase 托管服务器。

你只需要一个活跃的 Google 账户就可以开始使用 Firebase 了。让我们设置一个新的 Firebase 账户。

如果你没有 Google 账户，你可以通过访问www.gmail.com来创建一个。

设置新的 Firebase 账户

设置你的 Firebase 账户的第一件事是访问 Firebase 网站，它是www.firebase.com。

你应该会看到一个看起来像我们在以下屏幕截图中所展示的屏幕：

一旦完成这些，你应该会在右上角看到一个标有使用 Google 注册的按钮。

当你点击这个按钮时，你应该会看到一个 Gmail 窗口要求你选择或登录一个 Google 账户。在你选择了你想要使用的 Google 账户之后，你应该会被重定向到你的全新 Firebase 账户。你将被重定向到的窗口应该看起来像我们在以下屏幕截图中所展示的那样：

注意

我们这里所有的示例都是基于我们的示例账户。你不应该使用前一个屏幕截图中的 URL，而应该使用你自己在窗口中看到的 URL。如果你不这样做，你的示例将不会工作。

您会看到为您创建了一个名为我的第一个应用的 Firebase 应用。当使用 Firebase 时，对于每个我们创建的应用，我们也会在 Firebase 仪表板上为它创建一个应用。这是因为 Firebase 使用不同的 URL 为您提供访问您创建的每个独特应用的数据的权限。所以，将这个我的第一个应用Firebase 应用视为一个数据库。

现在，让我们更仔细地看看我的第一个应用：

您应该看到与前述截图非常相似的内容。您可以通过点击带有.firebaseIO.com URL 的帖子来访问您的 Firebase 数据库的 URL。请记住，截图中的 URL 将不同于您在仪表板中看到的 URL，您应使用仪表板上的 URL。

您可以看到，我们在这里用于演示的 URL 是luminous-inferno-8905.firebaseIO.com。

点击您仪表板上的 URL，这将带您进入 Firebase 数据库，其外观应类似于以下截图：

再次明确一下，Firebase 使用 URL 来访问数据库。您在前述截图中所看到的是数据库的仪表板。您也可以在浏览器的地址栏中看到相同的数据库 URL。Firebase 使用 JSON 风格的数据库结构，因此我们发送给它的是 JSON，我们存储的也是 JSON。

当我们向数据库添加数据时，我们将在仪表板中看到它。

将 Firebase 集成到 tabs-app 应用中

现在我们已经有了 Firebase 账户，并且知道了如何获取 Firebase 数据库的 URL，下一步是将它集成到我们的应用中。

添加 Firebase 和 Angular-Fire 脚本

我们需要做的第一件事是添加所需的脚本。我们需要两个脚本。第一个是 Firebase 库。第二个脚本是 Angular-Fire 库。Angular-Fire 是一个 Angular 库，它使得在 AngularJS 应用中使用 Firebase 变得更加简单。

最简单的方法是使用托管库引用。要将此添加到我们的应用中，打开您的index.html文件，并在应用的<head>部分添加以下脚本引用：

<!-- Firebase -->
<script src="img/firebase.js"></script>
<!-- AngularFire -->
<script src="img/ angularfire.min.js"></script>

如果您操作正确，index.html的head部分应类似于以下截图：

注意

确保您的引用位于前述截图中所见的 Ionic 包下方。这一点非常重要，否则您的应用将无法正常工作。

下一步是引用您的 Angular-Fire 模块。这一步将确保我们可以在应用中使用 Angular-Fire。此模块的名称是firebase。它将被添加到您的应用根模块中，在app.js文件中称为starter。

目前，此模块的声明看起来类似于以下截图：

您需要将firebase模块作为依赖模块添加。这样做会使模块声明看起来类似于以下截图所示：

您可以看到，firebase模块现在作为依赖项添加到了模块声明中。通过这样做，我们已经成功地将 Firebase 集成到我们应用程序的皮肤中。下一步是实际实现它以保存我们的数据。

在我们的应用程序中实现 Firebase

要在我们的应用程序中实现 Firebase，我们将在WallController控制器中做一些工作。首先，我们需要编写代码以从数据库中提取项目。其次，我们需要编写代码以将项目添加到数据库中。

从数据库中提取

我们需要做的第一件事是将$firebaseArray服务依赖项添加到我们的WallController控制器中。这个服务是 Angular-Fire 库的一部分，使我们能够轻松地在 Firebase 中处理数组。

正确添加服务依赖项应该会使你的WallController控制器定义看起来如下截图所示：

下一步是实际编写从数据库中提取数据的代码。在WallController控制器中复制以下代码块提供的代码：

        var postsDatabaseRef = new Firebase("https://<YOUR- FIREBASE-APP>.firebaseio.com").child('posts');
    var postsData = $firebaseArray(postsDatabaseRef);

这段代码首先创建一个新的 Firebase 引用。我们传递了之前创建的 Firebase 数据库的 URL。请确保将占位文本（YOUR-FIREBASE-APP）更改为反映您的 Firebase 数据库的 URL。

在此之后，我们使用了之前添加的$firebase服务来创建一个名为postData的路径。我们需要做的最后一步是允许我们的应用程序从这个postData路径加载数据并使用它。为此，我们需要稍微编辑一下我们的WallController代码。目前，我们的WallController控制器的代码如下截图所示：

请密切注意前一张截图中所高亮的代码片段。我们需要编辑这段代码，使其不再等于一个空数组，而是等于我们的postData变量。正确地完成这一步应该会使我们最终得到一个如下截图所示的WallController控制器：

通过这样做，我们已经实现了第一部分；我们的 Firebase 实现和应用程序现在从我们的数据库加载数据。下一步是实现将我们的帖子添加到数据库中的代码。

添加到数据库

向数据库添加实际上非常简单。我们只需要稍微编辑一下我们的addPost()函数。目前，我们的addPost()函数如下截图所示：

要使我们的数据在数据库中持久化，我们只需要将前面截图中突出显示的代码替换为以下代码块：

      $scope.posts.$add($scope.post);

现在，你的addPost()函数应该看起来像下面截图中的那样：

我们所做的只是将unshift()方法更改为$add()方法。$add()方法是 Firebase 提供的一个方法，用于将项目添加到 Firebase 数据库中。到目前为止，我们已经完成了后端实现的全部工作。尽管这个过程很简单，但我们只需几个简单的步骤就建立了一个工作数据库，现在可以对其进行测试。你的最终WallController控制器应该看起来像以下代码块：

.controller('WallController', function($scope, $firebaseArray) {
    var postsDatabaseRef = new Firebase("https://<YOUR-FIREBASE- APP>.firebaseio.com").child('posts');
    var postsData = $firebaseArray(postsDatabaseRef);

    $scope.post = {
      message : ''
    };

    $scope.posts = postsData;

    $scope.addPost = function () {
      $scope.posts.$add($scope.post);

      $scope.post = {
        message: ''
      };
    };

  })

要测试你的应用程序，只需使用ionic serve技术运行你的应用程序。当你这样做时，你应该能够在你的应用程序中输入消息，即使你刷新浏览器，你之前发布的数据仍然存在。此外，如果你查看你的数据库的 Firebase 仪表板，你将看到你在应用程序中输入的数据已经存在那里。

摘要

在本章中，我们学习了一些非常酷的方法，使用 Firebase 轻松地为我们的 Ionic 应用添加后端。我们只是触及了 Firebase 能让我们做什么，你可以查看www.firebase.com/docs/提供的 Firebase 文档，以了解 Firebase 的完整功能。

到目前为止，我们几乎已经接近本书的结尾。下一章将是最后一章，你绝对应该阅读它。它包含了一些如何利用本书中学到的技能来进一步提升使用 Ionic 能力的非常有用信息。

第十章。汇总

在本章中，我们将概述一些关于 Ionic 我们尚未涉及的重要内容，这些内容可能对你非常有用。你还将学习一些关于 Ionic 的有用技巧，并发现一些关于如何更好地使用 Ionic 开发优秀应用的精彩技巧。

Ionic 的未公开特性

尽管在这本书中我们讨论了许多精彩的主题，但还有很多出色的特性我们没有涉及，因为它们超出了本书的范围。我们主要关注了 Ionic 的核心特性，例如如何设置 Ionic。然后我们学习了如何使用空白、侧边菜单和标签模板来创建 Ionic 应用。我们还学习了如何通过 ionic serve 技术使用 Chrome 浏览器测试我们的 Ionic 应用。

在本书的这一部分，我将列举一些对你来说非常有用的东西，这将帮助你更好地掌握 Ionic。

Appcamp.IO

Appcamp.IO 是由一些 Ionic 员工创建的免费网站。这是一个你可以去学习一些技巧和窍门的地方，这些技巧和窍门将帮助你提高 Ionic 开发技能。

Appcamp.IO 上的内容非常适合初学者，并且在某些方面与本书的哲学相一致。

Ionic 文档

Ionic 文档页面几乎可以称为关于 Ionic 的一切的圣经。Ionic 的文档非常完善，你想要使用的任何特性都有示例代码和使用说明。你可以通过 www.ionicframework.com/docs 访问 Ionic 文档：

Ionic 创建者

这是 Ionic 为那些想要设计第一个应用或编码技能有限的人构建的拖放工具。它最伟大的特性是，你可以通过拖放设计任何 Ionic 元素，并在浏览器中测试，代码可以提取为现成的应用程序。这对那些不知道如何编码的设计师来说是个好消息，因为他们可以快速使用 Ionic 创建者的可视化拖放功能来设计他们的应用，并将代码传递给经验丰富的开发者。你可以访问 creator.ionic.io 的 Ionic 创建者网站。

Ionic 代码笔

有时候，即使你已经访问了 Ionic 某个组件的文档，你仍然可能想看到一个真实的代码示例。或者你可能想尝试重现一个错误以向他人展示。这正是 Ionic 代码笔网站大放异彩的地方。这是一个你可以找到一些真正出色的不同特性实现的地方，代码可供你学习。这也是向那些能够看到并帮助你解决问题的人展示错误的最佳方式。

你可以访问 codepen.io/ionic 的 Ionic 代码笔网站。

Ionic.IO

Ionic.IO 平台是一套完整的优质工具集，它使您能够为您的 Ionic 应用程序添加出色的服务。使用 Ionic.IO，您可以添加诸如 推送通知、分析 以及在云端构建应用商店应用的特性。此外，还有 Ionic 部署功能，它允许您在不重新提交到应用商店的情况下实时更新您的应用程序。

在撰写本书时，Ionic.IO 工具都处于测试版，尽管在撰写时它们是免费的，但 Ionic 已宣布它们将在未来成为付费服务。这是您应该密切关注的事情，因为您可能需要使用到 Ionic.IO 平台提供的一些服务。

您可以访问 www.ionic.io 的 Ionic.IO 平台。

离子沙盒

离子沙盒是一个非常新颖且实用的工具，可以快速启动一个想法。这是一个简单地将代码生成并直接在浏览器中显示结果的好方法。我个人认为这个工具在教育领域非常有用，因为它使得仅使用浏览器就能轻松创建 Ionic 应用程序。

如果您发现自己需要快速展示/演示某物，且附近有电脑，那么请确保尝试使用离子沙盒。

您可以访问 play.ionic.io/ 的离子沙盒。

离子社区

离子之所以非常成功的主要原因之一是它拥有一个强大的活跃社区。从社交媒体和聚会团体到开源活动家，Ionic 从世界各地的人们那里获得了广泛的支持。这意味着，如果您遇到任何问题，您永远不会离帮助太远。考虑到这一点，以下是一些您可能想要关注的社区元素链接：

• 离子论坛：离子论坛真的是一个很好的地方，可以表达您的困扰或找到共同问题的解决方案。这里有多个活跃的成员和用户，他们通过评论和帮助他人找到解决方案为论坛做出贡献，并获得激励徽章。您可以通过 forum.ionicframework.com 访问此论坛。

• 离子 Slack 频道：这个频道有超过 4000 人在 24/7 以及多个国家活跃。这是一个结识人们、寻找工作、寻求帮助、雇佣某人或仅仅表达自己的好地方。要加入离子 Slack 频道，只需免费请求一个邀请 ionicworldwide.herokuapp.com。

• Twitter：当谈到寻找有关 Ionic 的最新和最优秀的内容时，Twitter 是最活跃的社会媒体平台。如果您使用 Twitter，可以关注 @ionicframework 以获取更多信息及更新。

• The Ionic 博客: Ionic 非常积极地撰写关于使用 Ionic 的各种主题的博客文章。其中一些文章可能是关于关键更新、鼓舞人心的故事，甚至是新产品或新功能的公告。你可以在blog.ionic.io找到 Ionic 博客。

• Ionic 聚会小组: 在世界各地，有成百上千的聚会小组自主举办活动和聚会。这是当地人民为了在他们所在的地区推广 Ionic 意识而做出的社区努力，你几乎可以保证在你的附近城市会有一个。如果你没有，请随意开始你自己的本地聚会。你可以在blog.ionic.io/ionic-worldwide找到所有聚会的列表。

Ionic 的社区是其快速发展的主要原因，你应该确信信任这个社区以满足任何需求。作为备注，请确保使用你在本书中学到的技能来真正努力提高你的 Ionic 技能并构建一些优秀的移动应用程序。记住，没有什么是太简单而不能变得伟大，也没有什么是太伟大而难以构建的。

有用资源

以下是一些有用的链接，这些网站和资源将帮助你在学习更多关于 Ionic 的过程中更进一步：

• The Ionic 框架: www.ionicframework.com

• The Ionic GitHub: www.github.com/driftyco/ionic

• AngularJS: www.angularjs.org

• Ionic stack overflow: stackoverflow.com/questions/tagged/ionic-framework

• Firebase: www.firebase.com

• NodeJS: www.nodejs.org

• Bower: www.bower.io

• Gulp: www.gulpjs.com

• Cordova: cordova.apache.org

• Ionic 市场: market.ionic.io

• ngCordova: ngcordova.com

• 离子职位: jobs.ionic.io

• Ionic 展示: showcase.ionicframework.com

• Ionic lab: lab.ionic.io

摘要

本章是对 Ionic 及其所有功能的总结。我希望你现在将知道如何为你的移动应用程序构建丰富的功能，并在 Ionic 的帮助下拥有类似原生的特性。